CSS 通用兄弟选择器

介绍

在CSS中，选择器是用于选择HTML元素并为其应用样式的重要工具。通用兄弟选择器（General Sibling Selector）是CSS选择器中的一种，它允许你选择某个元素之后的所有兄弟元素。与相邻兄弟选择器（Adjacent Sibling Selector）不同，通用兄弟选择器不要求目标元素紧跟在参考元素之后，只要它们共享同一个父元素即可。

语法

通用兄弟选择器的语法非常简单，使用波浪号（~）来连接两个选择器：

css
A ~ B

A 是参考元素。
B 是目标元素，它可以是 A 之后的任何兄弟元素。

代码示例

假设我们有以下HTML结构：

html
<div>
  <p>段落1</p>
  <span>文本1</span>
  <p>段落2</p>
  <span>文本2</span>
  <p>段落3</p>
</div>

如果我们想选择所有在 span 元素之后的 p 元素，可以使用通用兄弟选择器：

css
span ~ p {
  color: red;
}

输出结果

段落2 和 段落3 的文本颜色将变为红色，因为它们都在 span 元素之后。
段落1 不会受到影响，因为它位于 span 元素之前。

逐步讲解

选择参考元素：在 span ~ p 中，span 是参考元素。CSS会查找所有 span 元素。
选择目标元素：p 是目标元素。CSS会查找所有在 span 之后的 p 元素。
应用样式：所有符合条件的 p 元素都会应用指定的样式。

备注

通用兄弟选择器只会选择参考元素之后的兄弟元素，而不会选择之前的元素。

实际应用场景

1. 表单验证提示

假设你有一个表单，当用户输入错误时，你希望在输入框之后的所有错误提示文本都显示为红色：

html
<form>
  <input type="text" name="username" />
  <span class="error">用户名不能为空</span>
  <input type="password" name="password" />
  <span class="error">密码不能为空</span>
</form>

css
input ~ .error {
  color: red;
}

在这个例子中，所有在 input 元素之后的 .error 元素都会被选中并应用红色文本样式。

2. 列表项样式

假设你有一个任务列表，你希望所有在已完成任务之后的未完成任务都显示为灰色：

html
<ul>
  <li class="completed">任务1</li>
  <li>任务2</li>
  <li>任务3</li>
  <li class="completed">任务4</li>
  <li>任务5</li>
</ul>

css
.completed ~ li {
  color: gray;
}

在这个例子中，所有在 .completed 之后的 li 元素都会被选中并应用灰色文本样式。

总结

通用兄弟选择器是一个非常强大的工具，它允许你选择某个元素之后的所有兄弟元素，而不需要它们紧邻。这在处理复杂的HTML结构时非常有用，尤其是在需要为特定元素之后的多个兄弟元素应用样式时。

提示

如果你想进一步练习通用兄弟选择器，可以尝试创建一个包含多个嵌套元素的HTML结构，并使用通用兄弟选择器为不同的元素应用样式。

附加资源

通过掌握通用兄弟选择器，你将能够更灵活地控制网页的样式，提升你的CSS技能。

介绍​

语法​

代码示例​

输出结果​

逐步讲解​

实际应用场景​

1. 表单验证提示​

2. 列表项样式​

总结​

附加资源​

介绍

语法