1. 概述
CSS（层叠样式表）是一种用来描述网页上元素样式的语言。在开发过程中，我们经常需要选择并应用样式到多个元素上。为了简化代码和提高效率，CSS提供了多种方式来组合多个选择器。本文将详细介绍CSS如何组合多个选择器。
2. CSS选择器
2.1 基本选择器
CSS中的基本选择器包括元素选择器、类选择器和ID选择器。通过这些选择器，我们可以选择单个元素并应用样式。
/* 元素选择器 */
p {
color: red;
}
/* 类选择器 */
.my-class {
background-color: yellow;
}
/* ID选择器 */
#my-id {
font-size: 20px;
}
2.2 组合选择器
除了基本选择器外，CSS还提供了一些组合选择器，用来选择特定的元素组合。
2.2.1 后代选择器
/* 选择p元素内部的em元素 */
p em {
color: green;
}
上述代码中，选择了所有位于p元素内部的em元素，并应用了样式。
2.2.2 子元素选择器
/* 选择p元素的直接子元素em */
p > em {
font-weight: bold;
}
上述代码中，选择了p元素的直接子元素em，并应用了样式。
2.2.3 相邻兄弟选择器
/* 选择紧接在h2元素后的p元素 */
h2 + p {
text-decoration: underline;
}
上述代码中，选择了紧接在h2元素后的p元素，并应用了样式。
3. CSS选择器组合
除了使用单个选择器，CSS还提供了将多个选择器组合在一起的方式。
3.1 选择器的并集
/* 选择p元素和span元素 */
p, span {
color: blue;
}
上述代码中，同时选择了p元素和span元素，并应用了样式。
3.2 选择器的交集
通过在选择器之间使用空格，我们可以选择满足多个条件的元素。
/* 选择既包含.my-class类又包含#my-id ID的元素 */
.my-class #my-id {
background-color: orange;
}
上述代码中，选择了同时包含.my-class类和#my-id ID的元素，并应用了样式。
3.3 选择器的子组合
将多个选择器组合在一起，可以选择满足多种条件的元素。
/* 选择位于ul元素内部的li元素，并且li元素包含a元素 */
ul li a {
text-decoration: none;
}
上述代码中，选择了位于ul元素内部的li元素，并且li元素包含a元素，并应用了样式。
4. 选择器优先级
在CSS中，选择器的优先级决定了当多个选择器同时选择同一个元素时，哪个样式规则会生效。
4.1 选择器权重
选择器权重是用来衡量选择器优先级的指标。它由四个部分组成：内联样式、ID选择器、类选择器和元素选择器。
权重的计算规则如下：
内联样式的权重为1。
ID选择器的权重为100。
类选择器和元素选择器的权重为10。
通配符选择器和继承样式的权重为0。
当权重相同时，后面定义的样式会覆盖前面定义的样式。
4.2 选择器优先级示例
下面是一些示例，用于演示选择器优先级的计算规则。
/* 按优先级从高到低 */
/* 权重: 100 */
#my-id {
color: red;
}
/* 权重: 20 */
div .my-class {
color: blue;
}
/* 权重: 11 */
.my-class {
color: green;
}
/* 权重: 1 */
p {
color: black;
}
根据上述代码，如果某个元素既有#my-id，又有.my-class类，最终的颜色将是红色，因为#my-id的权重最高。
5. 结论
通过合理地组合选择器，我们可以更灵活地选择和应用样式。通过了解选择器的基本类型和组合方式，以及选择器的优先级，我们可以更好地控制页面的样式。希望本文对你理解CSS选择器的组合方式有所帮助。