8.3.2。一般兄弟组合器

Question

本例中'〜'的含义是什么？我在本教程中看到了这个例子。 http://css-tricks.com/the-checkbox-hack/

我知道它可以用来根据该复选框的状态完全不同地设置元素的样式。但是，我找不到任何解释'〜'的CSS文档？

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
   /* For mobile, it's typically better to position checkbox on top of clickable
      area and turn opacity to 0 instead. */
}

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   background: red;
}

Answer 1

它是兄弟元素的选择器。你在那里的那个将找到同一个父项中已选中复选框的所有'div'兄弟，但只有在dom中的复选框后面的那些。 <复选框前面的'Div'兄弟姐妹不会被包括在内。

令人敬畏的选择器参考，包括代字号： http://learn.shayhowe.com/advanced-html-css/complex-selectors

Answer 2

它是一个通用的兄弟组合子，类似于相邻的兄弟组合子（+）。区别在于第二个选择器不必紧跟第一个选择器意味着它将选择前一个选择器之前的所有元素。

Answer 3

http://www.w3.org/TR/selectors/#general-sibling-combinators

8.3.2。一般兄弟组合器

一般兄弟组合子由“波浪号”（U + 007E，〜）字符组成，它分隔两个简单选择器序列。由两个序列表示的元素在文档树中共享相同的父元素，由第一个序列表示的元素在第二个序列表示的元素之前（不一定是立即）。

示例：

h1~pre
  表示h1之后的前置元素。这是一个正确有效但部分描述：

<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>

CSS3样式是一个元素，取决于输入复选框的状态

3 个答案:

8.3.2。一般兄弟组合器