CSS 组合选择符详解与实战示例

在 Web 开发过程中，CSS 用于定义页面元素的样式，而选择器则帮助我们精确定位需要添加样式的元素。今天我们主要来讲解 CSS 中的组合选择符，它们能够根据 DOM 结构中元素之间的关系来选中目标元素，从而写出结构清晰、易于维护的 CSS 代码。

本文主要介绍以下几种组合选择符：

后代选择器
子选择器
相邻兄弟选择器
通用兄弟选择器

1. 后代选择器（Descendant Combinator）

后代选择器使用空格分隔两个选择器，例如：A B。
解释：该规则可以选中所有包含在 A 内部（不论层级深浅）的 B 元素。

示例代码：

div p {
    color: red;
}

说明：
这条规则将页面中所有在 <div> 内部的 <p> 元素的文字颜色设置为红色，不论 <p> 与 <div> 之间隔了多少层级。

2. 子选择器（Child Combinator）

子选择器使用 > 符号链接两个选择器，形如：A > B。
解释：该选择器仅选中作为 A 元素直接子元素的 B 元素，深层嵌套的 B 元素则不符合此规则。

示例代码：

ul > li {
    list-style-type: none;
}

说明：
这条规则仅移除 <ul> 标签下直接 <li> 子元素的默认列表样式。如果 <li> 被嵌套在其他元素中，则不会受到该规则影响。

3. 相邻兄弟选择器（Adjacent Sibling Combinator）

相邻兄弟选择器使用 + 符号连接，写作：A + B。
解释：该选择器用于选中处于 A 元素之后、同属一个父元素的第一个 B 元素。

示例代码：

h1 + p {
    margin-top: 0;
}

说明：
这条规则会将每个紧跟 <h1> 标签后（且处于同一父元素下）的第一个 <p> 元素的上边距设为 0。如果 <h1> 与 <p> 之间有其他元素存在，则该规则不生效。

4. 通用兄弟选择器（General Sibling Combinator）

通用兄弟选择器使用 ~ 符号，写作：A ~ B。
解释：该规则选中所有在 A 元素之后的同级 B 元素，而不要求它们一定紧邻 A 元素。

示例代码：

h1 ~ p {
    color: blue;
}

说明：
这条规则将所有在 <h1> 标签之后的同层级 <p> 元素的文字颜色设置为蓝色，不论它们是否紧邻 <h1> 标签。

综合示例

下面结合一个完整的 HTML 示例，演示如何利用上面介绍的组合选择符为不同关系的元素添加样式。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 组合选择符示例</title>
    <style>
        /* 1. 后代选择器：所有 <div> 内部的 <span> 元素 */
        div span {
            background-color: yellow;
        }

        /* 2. 子选择器：仅选择 <div> 的直接 <p> 子元素 */
        div > p {
            border: 1px solid blue;
            padding: 5px;
        }

        /* 3. 相邻兄弟选择器：紧跟在 <h2> 后面的 <p> 元素 */
        h2 + p {
            font-weight: bold;
            color: green;
        }

        /* 4. 通用兄弟选择器：所有在 <h2> 后出现的 <section> 元素 */
        h2 ~ section {
            margin-top: 10px;
            border: 1px dashed gray;
        }
    </style>
</head>
<body>
    <div>
        <span>这是一个 span 元素（后代选择器）</span>
        <p>这是直接作为 div 子元素的 p 元素（子选择器）</p>
        <div>
            <p>这是嵌套更深层的 p 元素（不受子选择器影响）</p>
        </div>
    </div>
    <h2>标题</h2>
    <p>这是紧邻 h2 后面的 p 元素（相邻兄弟选择器）</p>
    <section>
        <p>这是 h2 后出现的 section 元素（通用兄弟选择器）</p>
    </section>
    <p>这个 p 元素未紧邻 h2，不受相邻兄弟选择器影响，但如果它和 h2 属于同一父元素，则可能被通用兄弟选择器选中（具体取决于 HTML 结构）。</p>
</body>
</html>

说明：

后代选择器：div span 选中所有在 <div> 内部的 <span> 元素，给其添加黄色背景。
子选择器：div > p 规则只为 <div> 内的直接 <p> 子元素添加蓝色边框及内边距。
相邻兄弟选择器：h2 + p 使得紧随 <h2> 后的第一个 <p> 标签显示为绿色、加粗。
通用兄弟选择器：h2 ~ section 规则则选中 <h2> 标签之后所有的 <section> 元素，为其添加上边距及虚线边框。

总结

CSS 组合选择符能够帮助我们根据 DOM 树中元素之间的层级关系或并列关系来精确选取目标元素，这对于编写高效、可维护且层次分明的 CSS 代码至关重要。通过合理应用后代选择器、子选择器、相邻兄弟选择器与通用兄弟选择器，我们不仅能够提高样式的复用性，还能减少冗余代码，从而提升页面的渲染效率。

希望本篇博客对你深入理解 CSS 组合选择符有所帮助，如果你有任何疑问或建议，欢迎在下方留言讨论！

参考资料：

Happy Coding!