在初识CSS第一天的时候学到了css选择器，知道了大体分为基础和复合两种选择器。当时详细了解并掌握了基础选择器中的标签选择器、类选择器、ID选择器和通配符选择器四种。那么今天先简单了解一下复合选择器吧。
CSS复合选择器
复合选择器是指对两个或多个基础选择器进行组合形成的。
作用：可以更准确高效地选择目标元素。
分类：后代选择器、子选择器、并集选择器、伪类选择器。
- 后代选择器
又称包含选择器。也就是说两个元素之间为包含关系，父元素和子元素。子元素就是父元素的后代。只需要使用标签名来设置属性，在目标元素中不需要调用。
语法：父标签 子标签 {样式声明}。
两个标签之间空格分开。
代码示例：
<html>
<head>
<title>后代选择器</title>
<style>
ol li {
color: red;
}
ol li a {
text-decoration: none;
}
</style>
</head>
<body>
<ol>
<li>这组标签就是非常好的复合选择器示例。ol标签是父标签,li标签是子标签。</li>
<li>这组标签就是非常好的复合选择器示例。ol标签是父标签,li标签是子标签。</li>
<li>这组标签就是非常好的复合选择器示例。ol标签是父标签,li标签是子标签。</li>
<li>
<a href="#">我是第三层元素，孙子元素。</a>
</li>
</ol>
</body>
</html>运行界面：
- 子选择器
又称子元素选择器，他只能选择作为某元素的最近一级子元素。
语法：父元素>子元素 {样式声明}
两个标签之间使用>隔开。
代码示例：
<html>
<head>
<title>子选择器</title>
<style>
div>a {
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">div子元素1</a>
<p>
<a href="#">p元素的子元素，div的孙子元素。</a>
</p>
</div>
</body>
</html>运行界面：
- 并集选择器
可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
语法：元素1，元素2,，元素3 {样式声明}。
标签之间使用英文逗号隔开，最后一个元素后不需要加英文逗号。
代码示例：
<html>
<head>
<title>并集选择器</title>
<style>
.Bj,
p {
color: purple;
}
</style>
</head>
<body>
<div class="Bj">并集选择器1</div>
<p>并集选择器2</p>
<p>并集选择器3</p>
</body>
</html>运行界面：
- 伪类选择器
为元素添加特殊效果。
链接伪类：
语法：
“a:link”：设置没有被点击跳转的链接，默认显示的状态。
“a:visited”：设置已经被点击跳转的链接。
“a:hover”：设置鼠标悬停在链接上所显示的样式。
“a:active”：设置鼠标已经按下但还未弹起跳转的链接样式。
代码示例：
<html>
<head>
<title>链接伪类选择器</title>
<style>
/* 还没有被点击跳转的链接状态 */
a:link {
color: black;
}
/* 已经点击且跳转的链接状态 */
a:visited {
color: red;
}
/* 鼠标悬停还没有点击的链接状态 ，实际开发中常用链接状态*/
a:hover {
color: aqua;
}
/* 正在点击还没有弹起跳转的链接状态 */
a:active {
color: green;
}
</style>
</head>
<body>
<!-- 伪类选择器 -->
<!-- 链接伪类 -->
<a href="#">链接伪类的链接</a><br>
</body>
</html>表单焦点伪类：
用于选取获得焦点的表单元素。这个选择器主要针对表单元素。
语法：
input:focus {样式声明}
代码示例：
<html>
<head>
<title>表单焦点伪类选择器</title>
<style>
/* 表单焦点伪类 */
/* 获取表单元素的光标指向，光标在哪个表单元素上，那个表单元素就出现设置的样式 */
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>运行界面：
今天学习的内容就到这里了，明天继续，加油加油！