目录
一、复合选择器
后代选择器、子选择器见：https://blog.csdn.net/Regina_Cai/article/details/127095094?spm=1001.2014.3001.5501
4. 并集选择器（重要）
并集选择器可以选择多组标签，同时为它们定义相同的样式 。通常用于集体声明。
并集选择器 是各选择器通过英文逗号（,）连接而成， 任何形式的选择器都可以作为并集选择器的一部分。
4.1 使用方式
元素1, 元素2 { 样式声明 }
上述语法表示 选择元素1和元素2
- 元素1和元素2中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器之并集选择器</title>
<style>
/* 要求1：请把熊大和熊二改为粉色 */
/* div,
p {
color: pink;
} */
/* 要求2：请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
div,
p,
.pig li {
color: pink;
}
/* 约定的语法规范，并集选择器喜欢竖着写 */
/* 一定要注意，最后一个选择器 不需要加逗号 */
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
</html>
5. 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如:hover、:first-child。
因为伪类选择器有很多，如链接伪类、结构伪类、表单伪类等，本文只描述常用的链接伪类选择器。
5.1 链接伪类选择器
5.1.1 使用方式
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动链接（鼠标按下未弹起的链接） */
链接伪类选择器注意事项:
- 为了确保生效，请按照LVHA的顺序声明：a:link a:visited a:hover a:active。
- 记忆法：love hate 或者 lv 包包 hao
- 因为a链接再浏览器中具有默认样式，因此实际工作中都需要给链接单独指定样式。
链接伪类选择器实际开发中的写法:
/* a 是标签选择器 所有的链接平时的状态 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过的时候变化 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的灰色变成了红色 */
}
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器之伪类选择器</title>
<style>
a {
color: red;
text-decoration: none;
}
/* 未被访问的链接 a:link 把没有点击过的（访问过的）链接选出来 */
/* a:link {
color: #333;
text-decoration: none;
} */
/* a:visited 选择点击过的（访问过的链接）*/
/* a:visited {
color: orange;
} */
/* a:hover 选择鼠标经过的链接 */
a:hover {
color: rgb(0, 153, 255);
text-decoration: underline;
}
/* a:active 选择的是鼠标正在按下还没有弹起鼠标的链接 */
/* a:active {
color: rgb(3, 77, 3);
} */
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
<a href="http://www.baidu.com">百度一下</a>
<a href="https://www.qzone.com">QQ空间</a>
</body>
</html>
5.2 :focus 伪类选择器
:focus 伪类选择器 用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器主要针对表单元素来说。
5.2.1 使用方式
input:focus {
background-color: yellow;
}
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器之focus伪类选择器</title>
</head>
<style>
/* 把获得光标的input表单元素选取出来 */
input:focus {
background-color: pink;
color: green;
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
6. 复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于号 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, div |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住 a {} 和 a:hover 实际开发的写法 |
| :focus 选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |