目录
CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）
后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
当标签发生嵌套时，内层标签就成为外层标签的后代
📌
后代即被包含的所有标签
基本语法如下：
父代 后代……{
/* 键值对 */
}注意：
- 父代和后代中间用空格隔开
- 父代是父级，后代是子级，有多个后代时，最终选择的是最后一个后代
- 后代可以是儿子，也可以是孙子等，只要是父代的后代即可
- 父代和后代可以是任意基础选择器
示例代码（父代和后代都是标签选择器）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
ul li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>这是一段文本</li>
</ul>
<ul>
<li>这是一段文本</li>
</ul>
<ul>
<li>这是一段文本</li>
</ul>
</body>
</html>效果如下：
示例代码（父代和后代是类选择器或标签选择器）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
.red .pink {
color: red;
}
ul .pink {
color: pink;
}
.red li {
color: blue;
}
</style>
</head>
<body>
<ul class="red">
<li class="pink">这是一段内容</li>
</ul>
<ul>
<li class="pink">这是一段内容</li>
</ul>
<ul class="red">
<li>这是一段内容</li>
</ul>
</body>
</html>效果如下：
子选择器
不同于后代选择器，子选择器只会选择其直接后代，而不会选择间接的后代
基本语法如下：
父代>直接后代 {
/* 键值对 */
}注意：
- 父代和直接后代中间用
>隔开 - 父代是父级，直接后代是子级，最终选择的是直接后代
- 元素2 必须是亲儿子，其孙子、重孙之类都不归他管
示例代码（对比后代选择器和子选择器）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器与子选择器</title>
<style>
.red .pink a{
color: red;
}
ul>.pink {
color: pink;
}
</style>
</head>
<body>
<!-- 后代选择器 -->
<ul class="red">
<li class="pink">这是一段内容<a href="#">这是一段内容</a></li>
</ul>
<!-- 子选择器 -->
<ul>
<li class="pink">这是一段内容<a href="#">这是一段内容</a></li>
</ul>
</body>
</html>效果如下：
并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明
并集选择器是各选择器通过,（逗号可以理解为和的意思）连接而成，任何形式的选择器都可以作为并集选择器的一部分
基本语法如下：
选择器1, 选择器2……{
/* 键值对 */
}示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
/* 同时为标签div和标签p设置字体颜色为红色 */
div,p {
color: red;
}
</style>
</head>
<body>
<div>这是一段内容</div>
<p>这是一段内容</p>
</body>
</html>效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
.red, .blue {
font-family: 'Microsoft YaHei';
color: green;
}
</style>
</head>
<body>
<div>这是一段内容</div>
<p>这是一段内容</p>
<div class="red">这是一段内容</div>
<p class="blue">这是一段内容</p>
</body>
</html>效果如下：
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
基本语法如下：
标签:选择器类型 {
/* 键值对 */
} 链接伪类选择器
链接伪类选择器是为不同状态下的链接添加不同的效果
a:link没有点击过的(访问过的)链接a:visited点击过的(访问过的)链接a:hover鼠标经过的那个链接a:active鼠标正在按下还没有弹起鼠标的那个链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接伪类选择器</title>
<style>
/* 修改链接默认显示样式 */
a:link {
color: black;
text-decoration: none;
}
/* 修改链接访问后显示样式 */
a:visited {
color: red;
text-decoration: none;
}
/* 修改鼠标悬停到链接上的样式 */
a:hover {
color: blue;
text-decoration: underline;
}
/* 修改鼠标点击链接后的样式 */
a:active {
color: gray;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>注意：
为了确保生效，请按照 LVHA 的循顺序声明 :link－>:visited－>:hover－>:active。
📌
因为链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。实际开发中一般用到:link以及:hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接伪类选择器</title>
<style>
body {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<!-- 修改body标签的内容样式时无法修改链接的默认样式 -->
<a href="#">百度</a>
<div>这是一段内容</div>
</body>
</html>效果如下：
焦点伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取
基本语法如下：
input:focus {
/* 键值对 */
}示例代码：
- 当焦点在某一文本框时，将其背景颜色改为灰色，文本颜色改为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点伪类选择器</title>
<style>
input:focus {
background-color: gray;
color: blue;
}
</style>
</head>
<body>
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
</body>
</html>效果如下：
