上一篇博客，总结了CSS基础选择器的种类和用法，这一篇总结一下CSS高级选择器，之所以说“高级”，是因为今天总结的选择器含有简单的逻辑关系，比如交集和并集选择器，跟数学课上学的交集和并集内涵是相同的。
1.后代选择器
后代选择器，描述的是祖先结构。当要把某一部分的所有的什么，进行样式改变，就要用到后代选择器。
基本语法：
.div1 p{
color:red;
}中间用空格隔开，.div1 p 就是.div1的后代所有的p。也可以罗列多个标签或者类名：
.div1 li1 p {
color:red;
}这表示.div1里面的后代.li2里面的所有p标签。
示例：
<head>
<style type="text/css">
.div1 .li2 p{
color:green;
}
</style>
</head>
<body>
<div class="div1">
<ul>
<li>
<p>(*^__^*) 嘻嘻……</p>
<p>(*^__^*) 嘻嘻……</p>
<p>(*^__^*) 嘻嘻……</p>
</li>
<li class="li2">
<p>(*^__^*) 嘻嘻……</p>
<p>(*^__^*) 嘻嘻……</p>
<p>(*^__^*) 嘻嘻……</p>
</li>
<li>
<p>(*^__^*) 嘻嘻……</p>
<p>(*^__^*) 嘻嘻……</p>
<p>(*^__^*) 嘻嘻……</p>
</li>
</ul>
</div>
</body>网页效果：
2.交集选择器
用来选择两个不同标签或类名交集的选择器。
如图所示：
如果先选择两个同属于h3和.special的部分，就要用交集选择器。
基本语法：
h3.special{
color:red;
}注意：
1）交集选择器一般把标签选择器放在前面，标签h3和类名.special之间没有空格。
2）交集选择器也可以罗列连续相交。
如：
h3.special.xixi{
color:red;
}示例：
<head>
<style type="text/css">
h3.special{
color:red;
}
</style>
</head>
<body>
<h3>网红是怎么吸粉的？</h3>
<h3 class="special">网红简介</h3>
<h3 class="special">网红经历</h3>
<p class="special">2016年，蕾蕾在朋友的鼓励下，第一次开通了直播。</p>
<p>她唱歌很棒</p>
<p>三个月下来，她并没有明显的优势。于是她抱着试着看的态度，找到了网红培训师……（编不下去了，捂脸）</p>
<a href="" class="xixi">想成为网红吗？点进来</a>
</body>网页效果：
3.并集选择器
如果选择的是h3和.special的并集，基本语法如下：
h3,.special{
color:red;
}h3和.special 之间用逗号隔开，无空格。
修改上例后，网页效果如下：
属于h3的内容变红了，属于.special的也变红了。
4.通配符 *
* 表示所有元素
基本语法如下：
*{
color:red;
}效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
