“～"是什么意思?(波浪线/波浪线/旋转) CSS 选

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

问题描述

搜索 ~ 字符并不容易.我正在查看一些 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 选择器是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！