复合选择器是由两个或读个基础选择器，通过不同的方式组合成的，目的是为了可以选择更准确的目标元素。
一、交集选择器
例如：
<div class="orange">I am P1</div> <p class="orange">I am P2</p>
.orange {
color: orange;
}
p.orange {
font-size: 40px;
}
效果是：
p.orange {
font-size: 40px;
}
这段代码的p.orange{}就是交集选择器, 中间没用空格。
图解：
二、并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以使用并集选择器、
语法：
例如：
<div>I am P1</div> <p>I am P2</p>
div,
p {
color: orange;
}
效果：
图解：
三、后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代。其写法就是把外层标签写在前面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
例如：
<p>I am P1</p> <div> <p>I am P2</p> </div>
p {
color: skyblue;
}
div p {
font-size: 40px;
}
效果展示：
图解：
四、子元素选择器
子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“>”进行连接,注意，符号左右两侧各保留一个空格。
例如：
<ul class="nav"> <li> 一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul>
.nav > li {
color: skyblue;
}
效果是：
但是样式为：
.nav li {
color: red;
}
.nav > li {
color: skyblue;
}
效果却是这样：
像第二个样式，子级元素选择器会覆盖后代选择器，但是只覆盖了一级菜单（.nav的儿子）。
五、属性选择器
例如：
<a href="#" title="aa">百度</a> <a href="#" title="bb">新浪</a> <a href="#">jj</a> <a href="#">yy</a> <a href="#">xx</a>
a[title] {
color: skyblue;
}效果展示（只选中a标签里有title属性的a标签）：
又例如：
<input type="text" value="输入"> <input type="text" value="输入"> <input type="text" value="输入"> <input type="submit"> <input type="reset"> <input type="button" value="按钮">
input[type="text"]{
color: red;
}
此时属性均为type，那么选出文本框进行添加样式，就如上选择，效果展示：
对于后面三个，就是，选择属性值具有相同的字符（可以不完全相等），进行添加样式。如，对于第四个，有class="font12"，class="font22"，class="font32"，这三个class的属性值的首几个字母均为“font”，这样就可以通过 标签名（如div）, div[class^=font]{ color:red;} 进行设置样式。其他两个类似。
六、伪类选择器
1. E::first-letter文本的第一个单词或字
2. E::first-line文本的第一行
3. E::selection可改变选中文本的样式
注意：“：”一个冒号是伪类选择器，“::”两个冒号是伪元素选择器。
对于第三个，效果是如下图：
当鼠标对文字进行选择的时候，实现E::selection的样式。
4. E::before和E::after（△重要）
在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。
div::before {
content: "开始";
}
div::after {
content: "结束";
}E:after和E:before在高版浏览器下自动识别为E::after和E::before。
如：
<div>今年</div>
div::before {
content: "我";
}
div::after {
content: "18岁";
}
效果如下：
第二个图表示插入的文字在div里。