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

Question

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

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

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

它是什么？

score 24 · Accepted Answer

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

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

选择器匹配给定元素的兄弟元素。如果它是 h2 元素的兄弟，则此示例将匹配 ap 元素：

score 22 · Accepted Answer

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

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

score 9 · Accepted Answer

::用于CSS3 中的伪元素。

~是 CSS3 中的通用兄弟组合器，它用于选择跟在同一级别的另一个元素之后的元素。

3 回答 3