:: 和 ~ 在 css 中的作用是什么？答案

【问题标题】：What does :: and ~ do in css?:: 和 ~ 在 css 中的作用是什么？
【发布时间】：2012-05-03 07:16:27
【问题描述】：

我在 twitter 上查看一个人制作的代码，它是这样的：

div::after {
-webkit-transform: rotate(2deg);
}

div ~ div {
-webkit-transform: rotate(0deg);
}

这是什么？

【问题讨论】：

给你：w3.org/TR/selectors :: 是一个伪元素，而div ~ div 是一个 div 在一个 div 之后。
相关：stackoverflow.com/questions/10782054/… 和 stackoverflow.com/questions/16704049/…

【解决方案1】：

双冒号替换了单冒号选择器 CSS3 中的伪元素来明确区分伪类和伪元素。为了向后兼容，单冒号语法对于 CSS3 之前的选择器是可以接受的。所以，:之后是一个伪类， ::after 是一个伪元素。

通用兄弟选择器在 CSS3 中可用，组合器此选择器中使用的是波浪号 (~)。

选择器匹配给定元素的兄弟元素。这个例子将匹配一个 p 元素，如果它是 h2 的兄弟元素元素：

【讨论】：

Evotech 搞错了。带有单个冒号的:after 不是伪类，它一直是伪元素，即使您可以使用伪类语法。
是的 ::after 和 :after 是同一个东西，都是伪元素，正如规范在这里所说的 w3.org/TR/selectors/#pseudo-elements

【解决方案2】：

波浪号 (~) 是兄弟选择器

h2 ~ p { color:red; }

例如会使下面代码中的段落变为红色

<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>
<p>The selector above matches this paragraph.</p>

:: 用于::before 和::after 伪元素，它们与content: 一起允许您在每个链接之前放置例如图标

a::before { content:url(link.png); }

【讨论】：

【解决方案3】：

:: 在 CSS3 中用于 pseudo elements。

~ 是 CSS3 中的general sibling combinator，用于选择跟在同级另一个元素之后的元素。

【讨论】：