码迷,mamicode.com
首页 > Web开发 > 详细

(六)CSS伪元素

时间:2015-03-02 14:35:11      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

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

 

(六)CSS伪元素

标签:

原文地址:http://www.cnblogs.com/jxlsomnus/p/4308570.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!