CSS复合选择器
1. 后代选择器（包含选择器）
可以选择父元素里面的子元素。
/*表示选择元素1里面的所有元素2*/
元素1 元素2 {样式声明}
eg.
/*选择ol里面所有的li标签元素改为蓝色*/
ol li {
color: blue;
}
注：
- 元素1和元素2 中间用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器（基础选择器可以查看上一篇博客->https://www.cnblogs.com/chiYiN-zZZ/p/13428522.html ）
针对最后一条写一个例子。
<ol class="demo">
<li></li>
<li></li>
<li><span>我想变成蓝色</span></li>
</ol>
/*CSS样式的后代选择器写为如下*/
.demo li span {
color: blue;
}
2. 子元素选择器（子选择器）
只能选择某元素的最近一级子元素（只选择儿子，不选择其余后代）。
/*表示选择元素1里面的所有直接后代(子元素)元素2*/
元素1>元素2 {样式声明}
eg.
<div>
<p>我是儿子1
<p>我是孙子1</p>
</p>
<p>我是儿子2
<p>我是孙子2</p>
</p>
</div>
/*选择div里面所有最近一级p标签元素,字体大小改为12px*/
/*选中的是儿子*/
div > p {
font-size: 12px;
}
注：
- 元素1和元素2中间用“>”隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子，与剩余后代无关
3. 并集选择器
可以选择多组标签，同时为它们定义相同的样式。
通常用于集体声明。
/*表示选择元素1和元素2*/
元素1, 元素2 {样式声明}
<span>我和div里的文本都会变成蓝色</span>
<div>
我和span里的文本都会变成蓝色
</div>
/*CSS样式的并集选择器写为如下*/
span,
div {
color: blue;
}
注：
- 元素1和元素2中间用“,”隔开
- 书写时建议竖着写
4. 链接伪类选择器
| 类型 | 作用 |
|---|---|
| a:link | 选择所有未被点击的链接 |
| a:visited | 选择所有已被点击的链接 |
| a:hover | 选择鼠标经过的链接 |
| a:active | 选择鼠标按下未弹起的链接 |
也可以为a指定类名，然后通过类名使用链接伪类选择器。
链接伪类选择器注意事项：
- 为了确保生效，请按照LVHA的顺序声明。（:link -> :visited -> :hover -> :active）
- 因为a链接在浏览器中具有默认样式（颜色为蓝色，有下划线等），所以在实际工作中都需要给链接单独指定样式。
链接伪类选择器在实际工作开发中的写法：
a {
color: gray;
}
a:hover {
color: red;/*鼠标经过的时候，由原来的灰色变成了红色*/
}
5. :focus伪类选择器
用于选取获得焦点的表单元素，焦点就是光标。
一般情况下，<input>类表单元素才能获取，所以这个选择器主要针对于表单元素来说。
eg.
<input type="text" value="我想获得光标后背景颜色就变成红色">
/*CSS样式的:focus伪类选择器写为如下*/
input:focus {
background-color: red;
}
6. 总结
| 选择器 | 作用 | 特征 | 使用情况 | 用法 |
|---|---|---|---|---|
| 后代选择器 | 选择后代元素 | 可以是子孙后代 | 较多 | .demo span |
| 子元素选择器 | 选择最近一级后代元素 | 只选择亲儿子 | 较少 | .demo>span |
| 并集选择器 | 选择某些具有相同样式的元素 | 可以用于集体声明 | 较多 | .demo1, .demo2 |
| 链接伪类选择器 | 选择不同状态的链接 | 与链接相关 | 较多 | a:link、a:visited、a:hover、a:active |
| :focus伪类选择器 | 选择获得光标的表单 | 与表单相关 | 较少 | input:focus |