css 样式文件中的特殊符号 - 波浪号(也叫 tilde,squiggle,twiddle)

例子：

.check:checked ~ .content {
}

~ 选择器实际上是后继同胞组合器（在2017年之前称为一般同胞组合器）：

后继同胞组合器由“波浪号”（U+007E，~）字符组成，它将两个简单选择器序列分隔开。由这两个序列表示的元素在文档树中具有相同的父级，并且由第一个序列表示的元素位于由第二个序列表示的元素之前（不一定是紧随其后）。

看下面这个例子：

.a ~ .b {background-color: powderblue;
}
<ul><li class="b">1stli><li class="a">2ndli><li>3rdli><li class="b">4thli><li class="b">5thli>
ul>

.a ~ .b 匹配第四和第五个列表项，因为它们：

• 是 .b 元素
• 是 .a 的同胞元素
• 在 HTML 源代码中出现在 .a 的后面。

在 CSS 中，波浪号（~）是一种选择器，用于选择指定元素的同胞元素。波浪号选择器通常用于根据特定关系选择元素，例如选择表单输入后的错误消息。

下面是一个具体的例子，假设我们有以下 HTML 代码：

<ul><li class="item">Item 1li><li class="item">Item 2li><li class="item">Item 3li><li class="item important">Important Item 4li><li class="item">Item 5li><li class="item">Item 6li>
ul>

我们可以使用波浪号选择器来选择 “Important Item 4” 元素后的所有元素，如下所示：

.important ~ .item {color: red;
}

在这个例子中，波浪号选择器选择了所有同胞元素，并将它们的颜色设置为红色。这里，“.important” 是第一个元素，“~” 表示后面的 “.item” 是 “.important” 的同胞元素，因此所有同级别的 “.item” 都会被选择，并将它们的颜色设置为红色。

另一个常见的用法是选择表单输入后的错误消息，例如：

<label for="name">Name:label>
<input type="text" id="name" name="name">
<p class="error">Please enter your namep>

使用以下 CSS 代码可以选择与输入字段相邻的错误消息：

input:focus ~ .error {display: block;
}

在这个例子中，当输入字段获得焦点时，波浪号选择器选择了所有同胞元素，并将 “.error” 元素的显示属性设置为 block。因此，当输入字段获得焦点时，相关的错误消息将被显示出来。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！