css复合选择器是将两个或多个基础选择器按照一定的规则组合在一起，用于更精准地匹配页面中特定元素的选择器类型，它解决了单个基础选择器无法精准定位复杂页面元素的问题。
常见的css复合选择器类型
后代选择器
后代选择器用于选择某个元素内部的所有指定后代元素，语法是用空格分隔两个选择器，前面的选择器是祖先元素，后面的是后代元素，无论嵌套多少层都会被匹配。
/* 选择div内部所有的p元素，无论p嵌套在div的多少层子元素中 */
div p {
color: #333;
font-size: 14px;
}
子元素选择器
子元素选择器只会选择某个元素的直接子元素，不会匹配更深层的后代，语法是用大于号>分隔两个选择器。
/* 只选择div的直接子元素p，不会匹配div孙子辈及更深的p元素 */
div > p {
margin: 10px 0;
line-height: 1.5;
}
并集选择器
并集选择器可以同时给多个不同的选择器设置相同的样式，语法是用逗号分隔多个选择器，所有被列出的选择器都会应用对应的样式规则。
/* 同时给h1、h2、h3元素设置相同的字体 */
h1, h2, h3 {
font-family: "Microsoft YaHei", sans-serif;
}
伪类选择器
伪类选择器用于选择元素的特定状态，比如鼠标悬停、元素被点击、元素获得焦点等状态，常见的有:hover、:active、:focus等。
/* 鼠标悬停在按钮上时改变背景色 */
button:hover {
background-color: #409eff;
color: #fff;
}
/* 输入框获得焦点时添加边框样式 */
input:focus {
border: 1px solid #409eff;
outline: none;
}
交集选择器
交集选择器是同时匹配多个条件的元素，语法是将多个选择器紧挨着写在一起，元素需要同时满足所有选择器的条件才会被匹配。
/* 选择同时有box类和active类的元素 */
.box.active {
border: 2px solid #f56c6c;
}
复合选择器的优先级规则
复合选择器的优先级高于单个基础选择器，优先级的计算规则是给每个选择器类型赋予不同的权重：
- 内联样式权重为1000
- id选择器权重为100
- 类选择器、伪类选择器、属性选择器权重为10
- 元素选择器、伪元素选择器权重为1
复合选择器的总权重是其包含的所有选择器权重之和，权重高的样式会覆盖权重低的样式。如果权重相同，则后定义的样式会生效。
使用复合选择器的注意事项
首先不要过度嵌套复合选择器，嵌套层级过多会降低样式可读性，也会增加浏览器匹配元素的性能消耗。其次要注意选择器的权重计算，避免因为权重问题导致样式不生效。另外在编写复合选择器时，要确保选择器的逻辑符合页面结构，避免误匹配到不需要的元素。
<div class="container">
<p class="text">这是容器内的文本</p>
<div class="inner">
<p class="text">这是内层容器的文本</p>
</div>
</div>
比如上面的html结构，如果使用.container .text后代选择器，两个p元素都会被匹配；如果使用.container > .text子元素选择器，只有第一个p元素会被匹配。