“~"是什么意思?(波浪线/波浪线/旋转)CSS 选择器是什么意思? [英] What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

问题描述

搜索 ~ 字符并不容易.我正在查看一些 CSS 并发现了这个

Searching for the ~ character isn't easy. I was looking over some CSS and found this

.check:checked ~ .content {
}

什么意思?

推荐答案

~ 选择器实际上就是 一般兄弟组合器(在 选择器级别 4):

The ~ selector is in fact the General sibling combinator (renamed to Subsequent-sibling combinator in selectors Level 4):

一般的兄弟组合子由波浪号"组成(U+007E，~)分隔两个简单选择器序列的字符.这由两个序列表示的元素在文档树和第一个序列表示的元素位于(不一定紧随其后)所代表的元素之前第二个.

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

考虑以下示例:

.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 匹配第 4 个和第 5 个列表项，因为它们:

.a ~ .b matches the 4th and 5th list item because they:

• 是 .b 元素
• 是 .a
的兄弟
• 在 HTML 源代码顺序中出现在 .a 之后.

• Are .b elements
• Are siblings of .a
• Appear after .a in HTML source order.

同样，.check:checked ~ .content 匹配所有 .content 元素，这些元素是 .check:checked 的兄弟元素并出现在它之后.

Likewise, .check:checked ~ .content matches all .content elements that are siblings of .check:checked and appear after it.

这篇关于“~"是什么意思?(波浪线/波浪线/旋转)CSS 选择器是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！