说起css的选择器,我们最熟悉的应该就是class选择器和id选择器。但是css中的选择器却远远不止这几种。
我们在使用css的时候,虽然知道每次使用什么方法来对元素进行设置,但是却没有总结过css中选择器的种类,今天在查阅了官方文档之后,我对css的选择器做了一个总结,下面写出来,算是给自己做了一个梳理。
如下所示是css的MDN官方文档中所例出来的css选择器。
1、类型选择器 (示例:h1{})
代码实例:
<style>
h1{
color: lightpink;
}
p{
color: cornflowerblue;
}
</style>
<body>
<div>
<h1>类型选择器</h1>
<p>类型选择器</p>
</div>
</body>
运行结果如下:
2、通配选择器(示例:*{})
代码实例:
<style>
*{
color: peachpuff;
}
</style>
<body>
<div>
<h1>类型选择器</h1>
<p>类型选择器</p>
</div>
</body>
运行结果如下:
3、类选择器(示例:.box{})
代码实例:
<style>
.one{
color: darkseagreen;
}
.two{
color: lightpink;
}
</style>
<body>
<div>
<h1 class="one">类型选择器</h1>
<p class="two">类型选择器</p>
</div>
</body>
运行结果如下:
4、ID选择器(示例:#unique{})
代码实例:
<style>
#one{
color: black;
}
#two{
color: goldenrod;
}
</style>
<body>
<div>
<h1 id="one">类型选择器</h1>
<p id="two">类型选择器</p>
</div>
</body>
运行结果如下:
5、标签属性选择器(示例:a[title]{})
代码实例:
<style>
#one{
color: black;
}
#two{
color: goldenrod;
}
a[href]{
color: darkseagreen;
}
</style>
<body>
<div>
<h1 id="one">类型选择器</h1>
<p id="two">类型选择器</p>
<a href="http://www.baidu.com" title="t1">点我试试,我是a标签</a>
</div>
</body>
运行结果如下:
6、伪类选择器(示例:p1:first-child{})
代码实例:
<style>
/*选择属于其父元素的首个子元素的每个 <p> 元素*/
p:first-child{
color: gold;
}
</style>
<body>
<div>
<!-- 父元素div中第一个元素是p,因此样式会变化-->
<p>第一个p段落</p>
<p>第二个p段落</p>
<h1 id="one">类型选择器</h1>
<div>
<!-- 这里p不是div父元素的第一个元素,因此样式没有改变-->
<h1>类型选择器</h1>
<p>第一个p段落</p>
</div>
<a href="http://www.baidu.com" title="t1">点我试试,我是a标签</a>
</div>
</body>
运行结果如下:
7、伪元素选择器(示例:p::first-line{})
代码实例:
<style>
<!-- 选择每个 p 元素的首行 -->
p::first-line{
color: gold;
}
</style>
<body>
<div>
<!-- 父元素div中第一个元素是p,因此样式会变化-->
<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
<h1 id="one">类型选择器</h1>
<a href="http://www.baidu.com" title="t1">点我试试,我是a标签</a>
</div>
</body>
运行结果如下:
8、后代选择器(示例:nav ul li{})
代码实例:
<style>
nav ul li{
color: darkseagreen;
}
</style>
<body>
<div>
<nav>
<div>
<ul>
<div>
<a href="">
<li>
<div>
<ul>
<li>后代选择器1</li>
<li>后代选择器2</li>
</ul>
</div>
</li>
</a>
</div>
</ul>
</div>
</nav>
<a href="http://www.baidu.com" title="t1">点我试试,我是a标签</a>
</div>
</body>
运行结果如下:
9、子代选择器(示例:nav>ul>li{})
代码实例:
<style>
nav>ul>li{
color: darkseagreen;
}
</style>
<body>
<div>
<nav>
<ul>
<li>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</nav>
<a href="http://www.baidu.com" title="t1">点我试试,我是a标签</a>
</div>
</body>
运行结果如下:
上面分别例举了后代选择器和子代选择器的代码举例,下面对两者的区别进行一个总结。
CSS中
nav ul li ul
与nav>ul>li
这两种写法的区别是什么,>的作用是什么?
1、nav>ul只选择nav下一级里面的ul元素,例如上面dom结构里id为a的ul。
2、nav ul选择nav内所包含的所有ul元素,例如上面dom结构里面id为a、b、c的全部ul。
3、nav>ul比nav ul限定更严格,必须后面的元素只比前面的低一个级别。<style> *{ margin:0; padding:0; list-style:none; }nav ul li ul{ display:none; }nav>ul>li{ float:left; padding:10px; border:1px solid blue; }nav>ul>li>ul>li{ padding:10px; border-bottom:1px solid #ccc; } </style> <!-- >是指只能一代接一代,比如: nav>ul>li>ul>li,必须是下面这样的 --> <nav> <ul> <li> <ul> <li></li> </ul> </li> </ul> </nav> <!-- 然后nav ul li ul只要求后面的元素是在nav标签下的顺序即可,对中间隔了几层不敏感,比如: --> <nav> <div> <ul> <div> <a> <li> <div> <ul> <li></li> </ul> </div> </li> </a> </div> </ul> </div> </nav>
10、相邻兄弟选择器(示例:h1+p{})
代码实例:
<style>
h1+p{
color: gold;
}
</style>
<body>
<div>
<h1>相邻兄弟选择器</h1>
<p>相邻兄弟选择器1</p>
<p>相邻兄弟选择器2</p>
<p>相邻兄弟选择器3</p>
<p>相邻兄弟选择器4</p>
<a href="http://www.baidu.com" title="t1">点我试试,我是a标签</a>
</div>
</body>
运行结果如下:
11、通用兄弟选择器(示例:h1~p{})
代码实例:
<style>
h1~p{
color: gold;
}
</style>
<body>
<div>
<h1>通用兄弟选择器</h1>
<p>通用兄弟选择器1</p>
<p>通用兄弟选择器2</p>
<p>通用兄弟选择器3</p>
<p>通用兄弟选择器4</p>
<a href="http://www.baidu.com" title="t1">点我试试,我是a标签</a>
</div>
</body>
运行结果如下:
通过上面的代码可以看出,相邻兄弟选择器比通用兄弟选择器更严格一点。
相邻兄弟选择器的作用是:给指定选择器后边***紧跟***的那个选择器选中的标签设置属性。(同级的标签,不能是包含关系,那样紧跟就成了父子)
通用兄弟选择器的作用是:给指定选择器后边的所有选择器选中的所有标签设置属性。