根据元素的关系可以分为四类：

• 后代选择器
• 子代选择器>
• 邻接兄弟选择器+
• 通用兄弟选择器~

接下来分别介绍:

1. 后代选择器

选择某个元素的后代元素（不限层级，包括子元素、孙元素等）

基本语法：

祖先元素 后代元素 {
    样式规则;
}

使用示例：

style.css

/* 选择.container内的所有<p>元素 */
.container p {
    color: blue;
    font-size: 16px;
}

/* 选择.content内的所有<span>元素 */
.content span {
    background-color: yellow;
    padding: 5px;
}

index.html

<div class="container">
    <p>容器内的段落</p>
    <div class="content">
        <p>内容区域内的段落</p>
        <span>内容区域内的span</span>
    </div>
</div>
<p>容器外的段落</p>

2. 子代选择器

子代选择器也叫“亲儿子选择器”，只会选择父类的直接子元素，对孙子、重孙等无效。

基本语法：

父元素 > 子元素 {
    样式规则;
}

基本使用示例：

style.css

/* 只针对侧边栏的直接h3子元素 */
.sidebar > h3 {
    color: #ff6b6b;
    border-bottom: 2px solid #ff6b6b;
    padding-bottom: 10px;
}

/* 小工具内的h3不受影响 */
.widget h3 {
    color: #333;
    font-size: 1.2em;
}

index.html

<div class="sidebar">
    <div class="widget">
        <h3>小工具标题</h3>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
        </ul>
    </div>
    <h3>侧边栏标题</h3>
</div>

3. 邻接兄弟选择器

邻接兄弟：指在HTML结构中紧跟在一个元素后面的同级元素

只选择直接相邻的兄弟元素，两个元素必须有相同的父元素，元素B必须紧接在元素A之后。

基本语法：

元素A + 元素B {
    样式规则;
}

使用示例：

style.css

/* 标题后面的第一个段落特殊样式 */
h1 + p,
h2 + p,
h3 + p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #555;
    font-style: italic;
    margin-bottom: 1.5em;
}

/* 如果第一个段落有lead类，进一步加强样式 */
h1 + .lead {
    font-size: 1.3em;
    color: #333;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
}

index.html

<article>
    <h1>主要标题</h1>
    <p class="lead">这是引导段落，需要特殊样式。</p>
    <p>这是普通段落。</p>
    
    <h2>次级标题</h2>
    <p>另一个紧跟在标题后的段落。</p>
    <p>普通段落。</p>
</article>

4. 通用兄弟选择器

与邻接兄弟选择器不同的是，通用兄弟选择器选择位于一个元素后面的所有同级元素

选择当前标签后面所有兄弟元素（不一定是紧邻的），两个元素必须有相同的父元素，元素B可以在元素A后面的任何位置

基本语法：

元素A ~ 元素B {
    样式规则;
}

基本示例：

style.css

/* 标题后面的所有段落统一样式 */
h1 ~ p {
    font-family: 'Georgia', serif;
    font-size: 1.1em;
    text-align: justify;
}

/* 特殊处理引言段落 */
h1 ~ p.intro {
    font-size: 1.2em;
    font-style: italic;
    color: #7f8c8d;
    border-left: 3px solid #3498db;
    padding-left: 15px;
}

index.html

<article class="blog-post">
    <h1>博客文章标题</h1>
    <p class="intro">引言段落</p>
    <div class="image-container">
        <img src="example.jpg" alt="示例图片">
    </div>
    <p>正文第一段</p>
    <p>正文第二段</p>
    <blockquote>引用内容</blockquote>
    <p>正文第三段</p>
</article>