前言
什么是复合选择器
在CSS中,根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 主要包括后代选择器、子选择器、并集选择器、伪类选择器等等
一、后代选择器（重要）
又称为包含选择器，可以选择父元素里面的子元素.
语法规范
元素1 元素2 { 样式声明 }
上述语法规范表示，选择元素1 里面的 所有元素2。
例如：
ol li {
color: red; /* 选择ol里的所有li元素 */
}
注意事项
- 元素1，元素2中间用空格隔开
- 元素2 只要是元素1的后代都可以
- 对同名标签的区分: 对一个标签添加class属性 .class属性+后代名
案例：
<style>
ol li {
color: blue;
}
.fist li {
color: red;
}
</style>
<ol>
<li>我会变蓝</1i>
<li>我会变蓝</1i>
</ol>
<ul>
<1i>我不变</li>
<li>我不变</li>
</ul>
<ol class='fist'>
<li>我会变红</1i>
<li>我会变红</1i>
</ol>
二、子选择器
又称为子元素选择器，只能选择作为某元素的最近一级子元素。
语法规范
元素1 > 元素2 { 样式声明 }
上述语法规范表示，选择元素1里面的所有直接后代元素2（即子元素）。
例如：
div > p {
font-size: 12px;/*选择div里面所有最近一级P标签元素*/
}
注意事项
- 元素1和元素2之间用 大于号 隔开
- 只能选择离得最近的子元素(不包括几代之后的元素)
案例：
<style>
ul>li {
color: pink;
}
</style>
<ul>
<li><a href="#">会变粉</a></li>
<li><a href="#">不会变粉</a></li>
</ul>
三、并集选择器
并集选择器可以选择 多组标签 同时为他们定义相同的样式。
语法规范
元素1，元素2 { 样式声明 }
上述语法规范表示，选择元素1和元素2
例如：
ul,div,.fist li {
color: red;/*选择div，ul标签元素和.fist li，把他们都改为红色（.fist li其为后代选择器）*/
}
注意事项
- 各元素间用英文逗号(, )连接而成,任何形式的选择器 都可以作为并集选择器的一部分。
四、伪类选择器
用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
其最大的特点就是 用冒号（：）表示，比如 :hover
伪类选择器有很多，比如链接伪类选择器、结构伪类选择器等。
链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问（已被点击）的链接*/
a:hover /*选择师表指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
例如：
/*a是标签选择器 所有链接*/
a {
color: gray;
text-decoration: none;/*取消下划线*/
}
a:hover {
text-decoration: underline;/*鼠标经过，出现下划线*/
color :red;/*鼠标经过，灰色变成红色*/
}
注意事项
- 各链接伪类选择器需按照:link :visited :hover :active 的顺序声明，否则无法生效。
- 因为a链接在浏览器中具有默认样式，所有实际工作中都需要给a链接单独指定样式
来源：oschina
链接：https://my.oschina.net/u/4399604/blog/4335909