详解3大类CSS选择器

04-26 16:42 823浏览

举报 T字号

大字

中字

小字

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就可以看作最简单的CSS选择器，由于CSS选择器种类繁多，我们掌握起来比较麻烦，下面我们为大家把CSS选择器归为3大类，然后我们再细分，方便我们的学习。

1.分组和嵌套选择器

分组选择器

例如：h1{color:gray;}

p{color:gray;}

可以写成：h1, p{color:gray;}

嵌套选择器，例如：

.div1 p{
     color:white;
}
.div1 p a{
     color:yellow;
     font-weight:bold;
}
<div class="div1">
     <p>嵌套选择器
         <a href="#">深层嵌套选择器</a>
     </p>
</div>

通配符选择器

*{
       padding:0;
       margin:0;
}

2.属性选择器

属性选择器：属性选择器使用[attr] ；例如：把所有带有 title 属性的元素的字体设置为红色

<head>
    <style>
        [title]{
            color:red;
        }
    </style>
</head>
<body>
    <h1>h1 标题不带有 title 属性</h1>
    <h2 title="标题">h2 可以设置样式</h2>
    <a href="#" title="链接">超链接可以设置样式</a>
</body>

属性和值选择器：属性选择器使用[attr=value]

<head>
    <style>
        [title=Hello]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="Hello world">h1 标题 title="Hello world"</h1>
    <h2 title="Hello">h2 可以设置样式</h2>
    <a href="#" title="Hello">超链接可以设置样式</a>
</body>

属性和多个值的选择器：使用有两种情况：属性值用空格分隔使用：[attr~=value]；属性值用连字符分隔则使用：[attr|=value]

例如：把包含 title='Hello' 的元素的字体设置为绿色，使用 ~ 分隔属性和值

<head>
    <style>
        [title~=Hello]{
            color:green;
        }
        [lang|=zh]{
            color:gray;
        }
    </style>
</head>
<body>
    <h1 title="world">h1 标题 title="world"</h1>
    <h2 title="Hello">h2 可以设置样式</h2>
    <h3 title="Hello Web">h3 可以设置样式</h2>
    <a href="#" title="Hello world">超链接可以设置样式</a>
    <a href="#" lang="zh-TW">超链接可以设置样式</a>
</body>

表单样式：属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。例如：

<head>
    <style>
        input[type="text"]{
            width:150px;
            display:block;
            margin-bottom:5px;
            background-color:yellow;
        }
        input[type="button"]{
            width:120px;
            margin-top:5px;
            background-color:green;
        }
    </style>
</head>
<body>
    <form name="input" action="demo.php" method="get">
        用户名：<input type="text" name="user" placeholder="请输入登录名">
        昵　称：<input type="text" name="name" placeholder="请输入角色名">
        <input type="button" value="查询">
    </form>
</body>

3.组合选择器

组合选择符是包括各种简单选择器的组合方式，组合选择符说明了两个选择器直接的关系。
后代选则器:又称为包含选择器，以空格分隔，子元素选择器只能选择作为某元素子元素的元素。
子元素选择器:子元素选择器只能选择作为某元素子元素的元素，以 > 分隔，子元素选择器只能选择作为某元素子元素的元素。
相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素，以 + 分隔。
普通相邻兄弟选择器：选取所有指定元素的相邻兄弟元素，以 ~ 分隔。

我们只有掌握了这些CSS选择器的共同特点，分类起来就很容易了，动力节点在线的CSS视频教程对CSS选择器的各个种类和特性都做出了一一介绍，我们学起来能节省不少时间，只有能够化为己用，在CSS选择器这方面便再也难不倒你了。

0人推荐

共同学习，写下你的评论

0条评论

代码小兵498

153篇文章贡献528999字

详解3大类CSS选择器

1.分组和嵌套选择器

2.属性选择器

3.组合选择器

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

详解3大类CSS选择器

1.分组和嵌套选择器

2.属性选择器

3.组合选择器

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>