什么是"〜"(波浪/波浪/旋转)CSS选择器是什么意思？

Question

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

.check:checked ~ .content {
}

这是什么意思？

Answer 1

的~选择其实是在一般的兄弟姐妹组合子(在更名为后续的同胞组合子选择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个列表项,因为它们:

• 是.b元素
• 是兄弟姐妹 .a
• 之后出现.a在HTML源顺序.

同样,.check:checked ~ .content匹配所有.content元素,.check:checked并将其作为其后的兄弟元素.

Answer 2

一般兄弟组合

通用兄弟组合选择器与相邻的兄弟组合选择器非常相似.不同之处在于被选中的元素不需要立即接替第一个元素,但可以出现在它之后的任何位置.

更多信息

Answer 3

很高兴也检查家庭中的其他组合器,并回到这个具体的组合.

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

示例清单:

• ul li- 寻找内部 -选择所有的li放置(任意位置)内的元素ul; 后代选择器
• ul > li- 向内看 - 仅 选择直接li元素ul; 也就是说,它只会选择直接子女li的ul; 子选择器或子组合选择器
• 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
• 之后.a在HTML

在上面的示例中,它将标记为2nd li而不是4th.

   .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

Answer 5

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

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors