这篇介绍4种高级选择器，后代选择器，交集选择器，并集选择器，伪类选择器
1.后代选择器：定义的时候用空格隔开
对于X(空格)Y，表示所有属于X元素后代的Y元素，有这个样式，空格就表示后代
后代选择器， 就是一种平衡：共性，特性的平衡。当把某一个部分的所有的什么，进行样式该改变，就要想到后代选择器。
后代选择器，描述的是祖先结构，简单来说就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
例如：
<style>
.div p{
color: red;
}
</style>空格就表示后代，.div p表示,div1的后代所有的p
这里强调一下，这两个标签不一定紧挨着，只要保持一个后代的关联即可。也就说，选择的是后代，不一定是儿子。
<style>
h3 b i {
color: red;
}
</style>上面的代码意思是说：定义了<h3>标签中的<i>标签的样式。
或者可以写成
<style>
h3 i{
color: red;
}
</style>2.交集选择器：定义的时候紧密相连
集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
如果后一个选择器是类选择器，则写为div.speacial； 后一个是id选择器，则写为div#speacial。
可以类比集合来思考
div为一个集合，.speacial为一个集合，div.speacia为交集；
选择的元素要求同时满足两个条件：必须是div标签，然后必须是speacial标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>交集选择器测试</title>
<style type="text/css">
h3.special {
color: red;
}
</style>
</head>
<body>
<h3 class="special zhongyao">标题1</h3>
<h3 class="special">我也是标题</h3>
<p>我是段落</p>
</body>
</html>注意：
交集选择器没有空格。所以没有空格的div.speacial（交集选择器）和div .speacial（后代选择器）不是一个意思
交集选择器可以连续交：（一般不要这么写）
h3.special.red {
color: red;
}3.并集选择器：定义的时候用逗号隔开
三种基本选择器都可以放进来
p,h1,.title,#one{
color: red;
}4.一些选择器
（1）子代选择器：用符号>表示
div > p {
color:red;
}div的儿子p。和div的后代p的截然不同。
可以选择
<div>
<p>我是div的儿子</p>
</div>
不能选择：
<div>
<ul>
<li>
<p>我是div的孙子</p>
</li>
</ul>
</div>(2)序选择器
设置无序选择器<ul>中的第一个<li>为红色：
<style>
ul li:first-child{
color: red;
}
</style>最后一个last-child
<style>
ul li:last-child{
color: blue;
}
</style>序选择器还有更复杂的，我还不会，以后再写笔记。
（3）下一个兄弟选择器
IE7开始兼容，IE6不兼容
<style type="text/css">
h3 + p {
color: red;
}
</style>
参考了github大佬的总结orz
扫一扫
1528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
