关于前端:css-样式文件中的特殊符号-波浪号也叫-tildesquiggletwiddle

33次阅读

共计 1126 个字符,预计需要花费 3 分钟才能阅读完成。

例子:

.check:checked ~ .content {}

~ 选择器实际上是后继同胞组合器(在 2017 年之前称为个别同胞组合器):

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

看上面这个例子:

.a ~ .b {background-color: powderblue;}
<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

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

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

在 CSS 中,波浪号(~)是一种选择器,用于抉择指定元素的同胞元素。波浪号选择器通常用于依据特定关系抉择元素,例如抉择表单输出后的谬误音讯。

上面是一个具体的例子,假如咱们有以下 HTML 代码:

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item important">Important Item 4</li>
  <li class="item">Item 5</li>
  <li class="item">Item 6</li>
</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 name</p>

应用以下 CSS 代码能够抉择与输出字段相邻的谬误音讯:

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

在这个例子中,当输出字段取得焦点时,波浪号选择器抉择了所有同胞元素,并将 “.error” 元素的显示属性设置为 block。因而,当输出字段取得焦点时,相干的谬误音讯将被显示进去。

正文完
 0