版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
CSS学习笔记_CSS复合选择器
本文内容：
CSS复合选择器：
1. 什么是复合选择器
2. 后代选择器
3. 子代选择器
4. 并集选择器
5. 伪类选择器
5.1 链接伪类选择器
5.2 :focus选择器
6. 复合选择器总结
1、什么是复合选择器
在CSS中,可以根据选择器的类型把选择點分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素(标签)
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
2、后代选择器
又称为包含选择器，可以选择父元素里面的子元素
如：
<ul>
<li>我是li</li>
</ul>
<ol>
<li>我也是li</li>
<li><a href="#"></a></li>
</ol>
如何修改ul中li的样式呢？使用后代选择器代码如下：
ul li {
color: red;
}
修改 ol 中 li 中 a 标签的样式：
ol li a {
color: black;
}
注意：
- 元素与元素之间要用空格隔开
3、子代选择器
子元素选择器只能选择元素的最近一级子元素
语法：
元素1>元素2 {
}
例如：
<style>
.nav a { /* 这么写的话是后代选择器，两个a标签样式都会变*/
color: black;
}
.nav>a { /* 这么写就只会改变第一个a标签中的样式*/
color: black;
}
</style>
<body>
<div>
<a href="#">这是儿子</a>
<p>
<a href="#">这是孙子</a>
</p>
</div>
</body>
4、并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，任何形式的选择器都可以作为并集选择器的一部分。
语法：
元素1,元素2 { /* 用英文逗号隔开*/
}
5、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。
其最大的书写特点是用冒号表示。
5.1 链接伪类选择器
| 写法 | 意义 |
|---|---|
a:link |
选择所有未被访问的链接 |
a:visited |
选择所有已被访问过的链接 |
a:hover |
选择鼠标放在其上的链接 |
a:active |
选择活动链接（鼠标按下未松开的链接） |
例如：
<style>
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: red;
}
</style>
/*以上代码可以实现: 当鼠标点击过链接时，链接会变成红色*/
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
又如：
<style>
a:hover {
color: blue;
}
</style>
/*以上代码可以实现: 当鼠标放在链接上时，链接会变成蓝色*/
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
5.1.1 链接伪类选择器使用注意事项
- 为了确保生效，代码务必按照
link visited hover active的顺序书写。 - 因为 a 链接在浏览器中都有默认样式，所以在实际工作中都会给链接单独指定样式。
5.1.2 链接伪类在实际工作中的一般写法
a {
color: gray;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
5.2 :focus伪类选择器
:focus伪类选择器用于选择获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，所以这个选择器也一般是针对表单元素。
input:focus {
}
6、复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代（多级） | 较多 | 空格隔开 |
| 自带选择器 | 用来选择最近一级元素 | 只能选择最近一级 | 较少 | 大于号连接 |
| 并集选择器 | 选择某些可以使用相同样式的元素 | 可以用于集体声明 | 较多 | 英文逗号连接 |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{} a:hover在实际开发中的写法 |
:focus选择器 |
选择获得光标的表单 | 跟表单相关 | 较少 | input:focus记住这个写法 |