Question

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

.check:checked ~ .content {
}

这是什么意思？

Answer 1

~选择器实际上是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元素并显示在其后面。

Answer 2

一般兄弟组合

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

More info

Answer 3

还可以检查家庭中的其他combinators并回到具体的那个。

ul li
ul > li
ul + ul
ul ~ ul

示例清单：

ul li - 向内看 - 选择所有 li元素放置在{{{}内1}}; 后代选择器
ul - 向内看 - 仅选择 ul > li的直接 li元素;即它只会选择ul的直接子女li; 子选择器或子组合子选择器
ul - 向外看 - 选择紧随ul + ul之后的ul;它不是向内看，而是在外面寻找紧随其后的元素; 相邻的兄弟选择器
ul - 向外看 - 选择ul ~ ul之后的所有ul无关紧要，但是ul都应该有同一个父母; 一般同级选择器

我们在这里看到的是 General Sibling Selector

Answer 4

这是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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

JSFiddle

Answer 5

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

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

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

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

5 个答案: