1024

寻找~角色并不容易。我正在查看一些 CSS 并发现了这个

.check:checked ~ .content {
}

这是什么意思？

4

5 回答 5

1543

选择~器实际上是General 兄弟组合器（在选择器 Level 4中重命名为 Subsequent-sibling 组合器）：

通用兄弟组合符由分隔两个简单选择器序列的“波浪号”（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
  • 出现.a在 HTML 源代码顺序之后。

同样，.check:checked ~ .content匹配与其同级并出现在其之后.content的所有元素。.check:checked

于 2012-05-28T09:29:20.363 回答
267

还可以检查家族中的其他组合子并回到这个特定的组合子是什么。

  • ul li
  • ul > li
  • ul + ul
  • ul ~ ul

示例清单：

  • ul li-向内看- 选择放置（任何地方）的所有元素；后代选择器liul
  • ul > li-向内看- 仅选择;的直接 li元素 ul即它只会选择 ; 的直接子li级ul。子选择器或子组合器选择器
  • ul + ul-向外看- 选择ul紧随其后的ul; 它不是向内看，而是向外寻找紧随其后的元素；相邻兄弟选择器
  • ul ~ ul-向外看- 选择ul后面的所有内容，ul不管它在哪里，但两者都ul应该有相同的父级；通用兄弟选择器

我们在这里看到的是通用兄弟选择器

于 2016-09-16T21:46:36.333 回答
181

一般兄弟组合子

一般的兄弟组合器选择器与相邻的兄弟组合器选择器非常相似。不同之处在于被选择的元素不需要立即接替第一个元素，而是可以出现在它之后的任何位置。

更多信息

于 2012-05-28T09:11:54.367 回答
37

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
  • 在.aHTML之后

在上面的示例中，它将标记为第二li而不是第四。

   .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

于 2015-07-06T10:42:55.813 回答
12

请注意，在属性选择器（例如[attr~=value]）中，波浪号

表示属性名称为attr的元素，其值是以空格分隔的单词列表，其中一个恰好是value。

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

于 2018-01-24T19:45:52.383 回答