1

这个例子中的“~”是什么意思？我从本教程中看到了这个例子。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;
}
4

3 回答 3

3

它是兄弟元素的选择器。您在那里的那个会在同一个父级中找到选中复选框的所有“div”兄弟，但只有在 dom 中的复选框之后。复选框前面的“Div”兄弟姐妹将不包括在内。

很棒的选择器参考，包括波浪号： http ://learn.shayhowe.com/advanced-html-css/complex-selectors

于 2013-01-17T21:13:02.573 回答
3

它是一个通用的兄弟组合器，类似于相邻的兄弟组合器 (+)。不同之处在于第二个选择器不必紧跟第一个选择器，这意味着它将选择前一个选择器之前的所有元素。

于 2013-01-17T23:09:28.247 回答
2

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

8.3.2. 一般兄弟组合子

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

例子：

h1 ~ pre
表示 h1 之后的 pre 元素。这是对以下内容的正确和有效但部分的描述：

<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>
于 2013-01-17T21:34:16.320 回答