CSS 四类复合选择器

复合选择器是由多个选择器组合而成的选择器。通过复合选择器，您可以更加精确地选择元素，并为其应用样式。常见的复合选择器包括后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器。

一、后代选择器（Descendant Selector）

后代选择器用于选择某个元素内部的所有后代元素，即嵌套在该元素内部的子孙元素。

1. 后代选择器的基本语法

div p {
    color: red; /* 选择所有在<div>标签内的<p>标签 */
}

解释：

div p：选择所有div元素内的p元素，不管它是直接子元素还是后代元素。
该选择器会选中所有在<div>标签内部的<p>标签，包括嵌套的<p>元素。

二、子选择器（Child Selector）

子选择器用于选择某个元素的直接子元素。只有直接位于指定元素内的元素会被选中。

1. 子选择器的基本语法

div > p {
    color: blue; /* 选择所有<div>标签的直接子元素<p>标签 */
}

解释：

div > p：选择所有直接位于div元素内部的p元素。
只有当<p>元素是<div>元素的直接子元素时，才会应用此样式。

三、相邻兄弟选择器（Adjacent Sibling Selector）

相邻兄弟选择器用于选择紧接在指定元素后面的元素。即，选择某个元素后面的紧邻元素，而不管它们是否在同一父元素下。

1. 相邻兄弟选择器的基本语法

h1 + p {
    color: green; /* 选择紧跟在<h1>标签后面的第一个<p>标签 */
}

解释：

h1 + p：选择紧跟在<h1>标签后面的第一个<p>元素。
只有当<p>紧跟在<h1>之后，且它们有相同的父元素时，才会应用此样式。

四、通用兄弟选择器（General Sibling Selector）

通用兄弟选择器用于选择某个元素之后的所有兄弟元素。它可以选择所有位于指定元素之后的兄弟元素，而不仅仅是紧跟在后的元素。

1. 通用兄弟选择器的基本语法

h1 ~ p {
    color: purple; /* 选择所有位于<h1>标签之后的兄弟<p>标签 */
}

解释：

h1 ~ p：选择所有位于<h1>标签之后的<p>标签，不要求它们是直接相邻的。
该选择器会选中所有与<h1>标签同级且位于其之后的<p>标签。

复合选择器的总结

后代选择器（Descendant Selector）：通过空格组合，选择某元素的所有后代元素（不管是直接子元素还是孙子元素等）。
- 语法：div p
子选择器（Child Selector）：通过>组合，选择某元素的直接子元素。
- 语法：div > p
相邻兄弟选择器（Adjacent Sibling Selector）：通过+组合，选择某元素紧接在后面的兄弟元素。
- 语法：h1 + p
通用兄弟选择器（General Sibling Selector）：通过~组合，选择某元素后面所有的兄弟元素。
- 语法：h1 ~ p

复合选择器的实际示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器示例</title>
    <style>
        /* 后代选择器 */
        div p {
            color: red;
        }

        /* 子选择器 */
        div > p {
            color: blue;
        }

        /* 相邻兄弟选择器 */
        h1 + p {
            color: green;
        }

        /* 通用兄弟选择器 */
        h1 ~ p {
            color: purple;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个段落1。</p>
        <p>这是一个段落2。</p>
    </div>
    <h1>这是标题</h1>
    <p>这是与标题紧邻的段落。</p>
    <p>这是与标题非紧邻的段落。</p>
</body>
</html>

解释：