什么是“〜”（波浪/波浪/旋转）CSS选择器是什么意思？-Java 学习之路

700

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

.check:checked ~ .content {
}

这是什么意思？

5 回答

168
~ 选择器实际上是General sibling combinator（在selectors Level 4中重命名为Subsequent-sibling combinator）：

一般兄弟组合子由“波浪号”（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个列表项，因为它们：
- 是 .b 元素
- 是 .a 的兄弟姐妹
- 以HTML源顺序出现在 .a 之后 .
同样， .check:checked ~ .content 匹配所有 .content 元素，这些元素是 .check:checked 的兄弟，并出现在它之后 .
回复于 2024-04-26T14:15:27+08:00
3

General sibling combinator

一般兄弟组合选择器与相邻的兄弟组合选择器非常相似 . 不同之处在于被选中的元素不需要立即成功获得第一个元素，但可以出现在它之后的任何位置 .

More info

回复于 2024-04-26T14:15:27+08:00
118
很高兴也检查家庭中的其他combinators并回到这个具体的那个 .
- ul li
- ul > li
- ul + ul
- ul ~ ul
示例清单：
- ul li - Looking inside - 选择 all 在 ul 内放置（任意位置）的 li 元素; Descendant selector
- ul > li - Looking inside - 选择 ul 的 only the direct li 个元素;即它只会选择 ul 的直接儿童 ul ; Child Selector 或 Child combinator selector
- ul + ul - Looking outside - 紧跟 ul 之后选择 ul ;它不是向内看，而是在外面寻找紧随其后的元素; Adjacent Sibling Selector
- ul ~ ul - Looking outside - 选择 ul 之后的所有 ul 并不重要，但 ul 应该具有相同的父级; General Sibling Selector
我们在这看的那个是 General Sibling Selector
回复于 2024-04-26T14:15:27+08:00

它是 General sibling combinator 并在@ Salaman的答案中得到了很好的解释 .

我错过的是 Adjacent sibling combinator ，这是 + ，与 ~ 密切相关 .

例子就是

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

匹配 .b 的元素
与 .a 相邻
在HTML中 .a 之后

在上面的示例中，它将标记为2nd li 但不是第4个 .

.a + .b {
     background-color: #ff0000;
   }

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle

回复于 2024-04-26T14:15:27+08:00

1157

请注意，在属性选择器（例如， [data-components~=wheels] ）中，波浪号

表示属性名称为attr的元素，其值是以空格分隔的单词列表，其中一个是正确的值 .

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

回复于 2024-04-26T14:15:27+08:00

什么是“〜”（波浪/波浪/旋转）CSS选择器是什么意思？

5 回答

相关问题