twiddle）CSS选择器是什么意思？

2018-06-07 11:12:46

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

.check:checked ~ .content {
}

这是什么意思？

~选择器实际上是通用兄弟组合器（在选择器级别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>

一般兄弟组合子

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

更多信息

很好也检查家庭中的其他组合器，并返回这个特定的组合。

ul li

ul > li

ul + ul

ul ~ ul

示例清单：

ul li - 寻找内部 -选择所有的li放置（任意位置）的内部元件ul ; 后代选择器

ul > li - 向内看 - 只选择ul 的直接 li元素; 也就是说，它只会选择直接子li的ul ; 子选择器或子组合选择器

ul + ul - 向外看 - 在ul立即选择ul ; 它不在里面寻找，而是在外面寻找紧接着的元素; 相邻的兄弟姐妹选择器

ul ~ ul - 在外面寻找 - 选择ul后面的所有ul并不重要，但是两个ul应该具有相同的父亲; 一般兄弟姐妹选择

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

链接地址: http://www.djcxy.com/p/22847.html