本文详细介绍了CSS中的复合选择器，包括后代选择器、子选择器和并集选择器的用法。通过实例展示了如何使用这些选择器更精确地定位和应用样式。后代选择器使用空格分隔选择父元素内的子元素，子选择器用`>`选择直接子元素，而并集选择器用逗号分隔选择多个元素。了解这些选择器能帮助开发者更高效地编写CSS代码。
前言
项目需要用到前端的知识，对CSS进行复习，这篇博客复习的是CSS的复合选择器的用法
一、复合选择器是什么？
在博主前面的博客中，复习了CSS中基础选择器的相关用法，基础选择器能够通过标签、类名、id等属性选出相对应的标签进行样式的添加与删除。
而复合选择器则是将两个及以上的基础选择器进行组合，从而更精准和多样化地选择标签，下面针对各种复合选择器进行样例展示和说明。
二、复合选择器的各种用法
1.后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就会成为外层标签的后代。
元素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>Document</title>
<style>
ul li {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</body>
</html>
显示效果：
从图中可以看到，ul标签中的li全部被选中，且背景颜色变为红色；
然而ul标签外的li背景颜色没有变化，说明后代选择器选择成功；
值得一提的是，后代选择器中组合的选择器，可以是基础选择器的任意组合。
2.子选择器
子元素选择器只能作为某元素的最近一级子元素，简单的说就是选亲儿子元素。
类比后代选择器，子元素选择器就是只能选择一代的后代选择器，相当于特殊的后代选择器
元素1>元素2 {
样例声明
} /*最终选择的是元素1中的元素2*/
代码案例：
div>p {
样例声明
} /*最终选择的是div里面所有最近一级p标签*/
3.并集选择器
前面所有的后代选择器、子元素选择器都只能针对单个元素进行选择，说白了，选中的就是最后一个选择器；
然而现实情况是，我们通常要对多个元素进行共同样式书写，当然，你也可以给你要进行共同样式书写的元素进行添加共同类名。
然而，实际情况下，我们还有一种做法，就是通过并集选择器对元素进行选择。
元素1,元素2 {
样例声明
} /*最终选择的是元素1和元素2*/
代码案例：
div,p {
样例声明
} /*最终选择的是div标签和p标签*/
总结
以上提到的复合选择器，均可以使用各种基础选择器的组合，希望对于同一个问题，解决的思路不要局限，才能在多种情况做出最优的选择。
扫一扫
1208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
