在css中::和〜做什么？

Question

我正在查看一个人在twitter上制作的代码,它是这样的:

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

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

它是什么？

Answer 1

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

CSS3中提供了通用兄弟选择器,此选择器中使用的组合器是波形符(〜).

选择器匹配给定元素的兄弟元素.如果它是h2元素的兄弟,这个例子将匹配ap元素:

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

的::用于伪构件在CSS3.

的~是一般兄弟组合子在CSS3,它是用来选择跟随在同一水平另一个元件的元件.