Question

我正在查看一个人在Twitter上制作的代码，就像这样：

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

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

是什么？

Answer 1

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

一般兄弟选择器在CSS3和组合器中可用   此选择器中使用的是波形符（〜）。

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

Answer 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); }

Answer 3

{3}用于CSS3中的pseudo elements。

{3}中的::是general sibling combinator，它用于选择跟随同一级别的其他元素的元素。