CSS 选择器组合

CSS 选择器组合用于指定选择器之间的特定关系，以便可以根据 HTML 结构中元素之间的关系进行样式设置。换句话说，组合器可以帮助您根据元素在 HTML 文档中的位置和层次结构来定位元素。

例如，使用组合器，您可以设置紧跟在 div 元素后面的段落元素的样式。

组合器的类型

CSS 主要有四种组合器类型

后代组合器 (空格)
子元素组合器 (>)
相邻兄弟组合器 (+)
通用兄弟组合器 (~)

现在，我们将查看每种组合器的示例用法，在此之前，请确保您已经熟悉CSS 选择器。

CSS 后代组合器

后代组合器用于选择嵌套在另一个元素内的元素，无论嵌套深度如何。它们通常用单个空格 (" ") 表示。

例如，您可以像这样定位 <div> 内的所有 <p> 元素

div p {
   /* CSS styles for all p elements inside div */
}

同样，我们可以组合任何选择器，例如类、ID 等。在下面的示例中，我们将元素选择器与类选择器组合。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            background-color: lightblue;
            padding: 20px;
        }
        .parent p {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="parent">
        <h3> This is h3 tag inside parent element </h3>
        <p> This is a p tag inside parent element. </p>
        <p> This is a p tag inside parent element. </p>
    </div>
    <div>
        <p> This is a p tag outside parent element. </p>
    </div>
</body>

</html>

CSS 子元素组合器

子元素组合器 (>) 用于选择指定元素的直接子元素。它不会选择嵌套在子元素内的元素。

例如，您可以像这样定位 <div> 内的所有直接 <p> 子元素

div > p {
   /* CSS styles for all direct p children inside div */
}

同样，我们可以组合任何选择器，例如类、ID 等。在下面的示例中，我们为类 parent 内的所有 p 标签设置样式。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            background-color: lightgreen;
            padding: 20px;
        }
        .parent > p {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="parent">
        <h3> This is an h3 tag inside parent. </h3>
        <p> This is a direct p tag inside  parent. </p>
        <p> This is another direct p tag inside parent. </p>

        <div>
            <p> 
                This is a p tag nested inside a div in parent element. 
            </p>
        </div>
    </div>

    <div>
        <p> This is a p tag outside parent element. </p>
    </div>
</body>

</html>

CSS 相邻兄弟组合器

相邻兄弟组合器 (+) 用于选择紧跟在指定元素之前的元素。它只影响紧跟在指定元素后面的元素。

例如，您可以像这样定位紧跟在 <h3> 元素后面的 <p> 元素

h3 + p {
   /* CSS styles for the p element immediately following an h3 */
}

在下面的示例中，我们定位紧跟在 <h3> 元素后面的 <p> 元素。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            padding: 20px;
            background-color: lightyellow;
        }
        h3 + p {
            color: purple;
            font-style: italic;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>This is an h3 tag</h3>
        <p> 
            This is a p tag that immediately follows the h3 tag.
        </p>
        <p>
            This is another p tag, but it is not immediately 
            after the h3 tag.
        </p>
    </div>
</body>

</html>

CSS 通用兄弟组合器

通用兄弟组合器 (~) 用于选择所有作为指定元素的兄弟元素，并且在 HTML 结构中出现在其后面的元素。它将选择所有匹配的兄弟元素，而不仅仅是紧跟在后面的一个。

例如，您可以像这样定位所有跟在 <h3> 元素后面的 <p> 元素

h3 ~ p {
   /* CSS styles for all p elements following an h3 element */
}

在下面的示例中，我们定位所有作为 <h3> 元素的兄弟元素，并且出现在其后面的 <p> 元素。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            padding: 20px;
            background-color: #f0f0f0;
        }
        h3 ~ p {
            color: darkorange;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="container">
        <p> This is a p tag before h3 tag </p>
        <h3> This is an h3 tag </h3>
        <p> This is a p tag that follows the h3 tag. </p>
        <p> This is another p tag that also follows the h3 tag. </p>
        <div> This is a div tag. </div>
        <p> This is a p tag after div tag </p>
    </div>
    <p> This is a p tag after h3 tag outside container. </p>
</body>

</html>

组合多个组合器

在 CSS 中，您可以组合多个组合器以创建更复杂和更具体的选择器。通过组合不同的组合器，您可以根据 HTML 结构中更复杂的关系来定位元素。

例如，您可以像这样定位作为 <div> 的直接子元素并且紧跟在 <h3> 元素后面的 <p> 元素

div > h3 + p {
   /* CSS styles for p elements that are direct children of a div and 
      immediately follow an h3 element */
}

在下面的示例中，我们将子元素组合器与相邻兄弟组合器组合以定位导航菜单内的锚元素。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        nav {
            padding: 10px;
            background-color: #f0f0f0;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        ul > li {
            display: inline-block;
            margin-right: 15px;
        }
        ul > li + a {
            color: red;
            text-decoration: underline;
        }
        ul > li > a {
            color: blue;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <a href="#">Contact</a>
        </ul>
    </nav>
</body>

</html>

打印页面