(六)CSS伪元素

浏览数：27 / 时间：2015年06月09日

CSS伪元素用于向某些选择器设置特殊效果。

伪元素的用法和伪类相似：

selector:pseudo-element {property:value;}

CSS类也可以与伪元素配合使用：

selector.class:pseudo-element {property:value;}

：first-line伪元素：向文本的首行设置特殊样式。

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

：first-letter伪元素：向文本的首字母设置特殊样式。

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

CSS2-：before伪元素：可以在元素的内容前面插入新内容。

h1:before
  {
  content:url(logo.gif);
  }

CSS2-：after伪元素：可以在元素的内容之后插入新内容。

h1:after
  {
  content:url(logo.gif);
  }

伪元素和CSS类：

p.article:first-letter
  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>

多重伪元素：可以结合多个伪元素使用

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log 使用 si la Go for sp class style log 使用 si la Go for sp

相关文章