“~"是什么意思?(波浪线/波浪线/旋转)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，~)分隔两个简单选择器序列的字符.这由两个序列表示的元素在文档树和第一个序列表示的元素位于(不一定紧随其后)所代表的元素之前第二个.

考虑以下示例:

.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 选择器是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！