在css中::和〜做什么?

时间:2012-04-22 11:41:58

标签: css pseudo-element css-selectors

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

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

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

是什么?

3 个答案:

答案 0 :(得分:24)

  

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


  

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

     

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

http://reference.sitepoint.com/css/generalsiblingselector

http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

答案 1 :(得分:21)

波形符(〜)是兄弟选择器

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

答案 2 :(得分:9)

{3}用于CSS3中的pseudo elements

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