CSS复合选择器
复合选择器由两个及以上的基础选择器组合而成， 能更准确高效选择目标标签。
1、后代选择器（重点）2、子元素选择器3、交集选择器4、并集选择器（重点）5、链接伪类选择器6、复合选择器总结
1、后代选择器（包含选择器）（重点）
作用：用来选择元素或者元素组的子孙后代。写法：外层标签先写，后层标签后写，中间空格分开。语法
父级 子级 ... {
属性1:属性值1
;
属性2:属性值2
;
属性3:属性值3
;
... ...
}
案例
<div class="demo">
<ul>
<li>后代选择器测试
</li>
<li>后代选择器测试
</li>
<li>后代选择器测试
</li>
</ul>
</div>
.demo ul li {
color: #FFC0CB
;
}
注意：只要是后代就能选出来；以下例子也能成功：
.demo li {
color: #FFC0CB
;
}
注：li 标签是 demo类 的孙子代，可以直接跳过子代，直接选择。
2、子元素选择器
作用：子元素选择器只能选择标签自身的亲代子元素。写法：父级写前面，子级写后面，中间用 > 符号间隔。语法
父级>子级 ... {
属性1:属性值1
;
属性2:属性值2
;
属性3:属性值3
;
... ...
}
案例
<div class="demo1">
<span>
<strong>子元素选择器
</strong>
</span>
</div>
.demo1>span>strong {
color: #FFC0CB
;
}
注意：子元素选择器与后代选择器不同点在于：间隔符号不同，子元素选择器使用 > 符号，后代选择器用 空格符 。子代选择器*不能跳过儿子，直接选择孙子。
3、交集选择器
概念：交集选择器由两个选择器构成，找到的标签必须同时满足这两个标签的特点。
语法
案例
<p class="demo2">交集选择器测试
</p>
p.demo2 {
color: #FFC0CB
;
}
注意：第一个是标签选择器，第二个是类选择器，中间不能有空格。
4、并集选择器（重点）
概念：并集选择器就是各选择器通过 , 号相连选择样式相同的样式。
语法
案例
<p class="demo3">并集选择器
</p>
<span>并集选择器
</span>
<div id="demo3">并集选择器
</div>
.demo3,span,#demo3 {
color: #33A6DB
;
各类型的选择器都可以组合。
5、链接伪类选择器（重点）
作用:伪类选择器用于向某些选择器添加特殊效果。链接伪类选择器是其子集。语法
a:link {}
a:visited {}
a:hover {}
a:active {}
案例
<a href="http://www.baidu.com" class="demo4" >百度
</a>
a {
text-decoration: none
;
color: #FFA500
;
}
a:visited {
color: #CCCCCC
;
}
a:hover {
color: #990000
;
}
注意：1、链接伪类选择器要按照 L-V-H-A 的顺序书写，否则会失效。2、实际使用中链接伪类选择器很少写全。
6、复合选择器总结
