后代选择器
在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明，外层的标签写在前面，内层的标签写在后面，之间用空格分隔，标签嵌套时内层的标签成为外层标签的后代。
就是首先要符合外层标签然后还符合内层标签，这样的就可以被后代选择器修饰了
看样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div h3{ color: red; } </style> </head> <body> <div> <h3>水果</h3> <ul> <li> <h3>列表中的h3</h3> 香蕉</li> <li>苹果</li> <li>橘子</li> <li>菠萝</li> </ul> <h3>手机品牌</h2> <ul> <li>华为</li> <li>小米</li> <li>苹果</li> <li>联想</li> <li>三星</li> </ul> </div> <h3>div外面的h3标题</h3> </body> </html>
看下图，首先红色框 div 里的所有 h3 都会被上面的后代选择器给修饰，所有在 div 范围里的 h3 都会变成红色，下面蓝色框的 h3 ，由于不在 div 里面，所以不会被修饰。
运行效果：
所以这个很好理解吧，继续往下看
交集选择器
由两个选择器直接连接构成，选中二者各自元素范围的交集 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，选择器之间不能有空格，必须连续书写。
看样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h3.aa{ color: red; } h3#bb{ color: green; } </style> </head> <body> <h3 class="aa">水果</h3> <ul> <li>香蕉</li> <li>苹果</li> <li>橘子</li> <li>菠萝</li> </ul> <h3>手机品牌</h2> <ul> <h3 class="aa">列表里的h3标题</h3> <li>华为</li> <li>小米</li> <li>苹果</li> <li>联想</li> <li>三星</li> </ul> <div class="aa">class为aa但是不是h3标签的情况</div> <h3 id="bb">第二部分为id选择器的情况</h3> </body> </html>
看下图
红色的框框就是第一部分是便签选择器第二部分是类选择器的情况
绿色的框框就是第一部分是便签选择器第二部分是id选择器的情况
紫色的框框虽然类是aa但是不是h3标签，所以不会被修饰
运行效果：
这个也很好理解吧，就是交集，第一部分符合并且第二部分也符合就是可以被修饰的情况，顾名思义就是取交集。
并集选择器
多个选择器通过逗号连接而成，利用并集选择器同时声明风格相同样式
并集，只要符合其中一种就会被修饰
看样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h3,li{ color: red; } </style> </head> <body> <h3>水果</h3> <ul> <li>香蕉</li> <li>苹果</li> <li>橘子</li> <li>菠萝</li> </ul> <h2>手机品牌</h2> <ul> <li>华为</li> <li>小米</li> <li>苹果</li> <li>联想</li> <li>三星</li> </ul> <h3>牛哄哄的柯南</h3> </body> </html>
h3,li{
color: red;
}
如下图，所有的只要是 h3 或者是 li 的都会被修饰成红色。
h2 不属于其中的任意一种，所以不会被修饰
运行效果：
效果就是这样，并集，只要是其中的一种就会被标记了，注意多个选择器通过逗号连接而成 。
