通用兄弟选择器

Coddy CSS 选择器课程的第 10 课，共 15 课。

在这节课中，我们将了解通用兄弟选择器的概念。它是一种强大的方式，可以选中并设置与某个元素具有相同父元素且位于它之后的元素的样式。

通用兄弟选择器可以选中与某个元素具有相同父元素且位于它之后的元素。这个选择器使用波浪号（~）表示。

语法：

element ~ target-element {
    /* 应用于 target-element 的样式 */
}

示例：

HTML：

<div class="box"></div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="highlight"></div>
<p>Paragraph 4</p>

CSS：

.box ~ p {
    color: gray;
}

在这个示例中，所有位于 <div class="box"> 元素之后的 <p> 元素，其文本颜色都会设置为灰色。通用兄弟选择器（~）会选中指定的 <div> 之后的 <p> 元素，并为它们设置样式。

挑战

简单

根据给定的 HTML 结构，为位于 <h2> 元素之后的所有 <h3> 元素设置独特的背景颜色。

亲手试试


<html>
<head>
  <title>General Sibling Selector Exercise</title>
  <style>
    
  </style>
</head>
<body>
  <div class="content">
    <h2>Introduction</h2>
    <p>Content goes here...</p>
    <h3>Subsection 1</h3>
    <p>More content...</p>
    <h3>Subsection 2</h3>
    <p>Even more content...</p>
</div>
</body>
</html>

CSS 选择器中的所有课

1CSS 选择器简介

CSS 选择器的作用为什么它们很重要？

4属性选择器

属性选择器简介存在性和值完全匹配属性值选择器属性值选择器 II 属性值选择器 III

2简单选择器

类型选择器类选择器 ID 选择器通用选择器

3组合选择器

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

自己练习： Web 在线编辑器