CSS 2.1 中的伪元素

评论(0)

伪类和伪元素实际上都是差不多的东西,但是从概念上讲又太一样,关键看你怎么去想了,伪元素其实也是用形态或者特征去作为选择器去区分网页中不同的元素。
之前讲到CSS 2.1 中的伪类,这次开讲CSS 2.1 中的伪元素。

CSS 2.1 中的伪元素

大致如下表格:

选择器 含义 示例
E:first-line 匹配E元素的第一行 p:first-line { font-weight:bold; color;#600; }
E:first-letter 匹配E元素的第一个字母 .preamble:first-letter { font-size:1.5em; font-weight:bold; }
E:before 在E元素之前插入生成的内容 .cbb:before { content:””; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
E:after 在E元素之后插入生成的内容 a:link:after { content: ” (” attr(href) “) “; }

基本语法

其用法也很简单,
selector:pseudo-element {property:value;}
与CSS类配合使用时:
selector.class:pseudo-element {property:value;}

用法、演示

用法的测试代码

<style>
.csstest p:first-letter{
   font-size:28px;
   color:red;
}
</style>
<div class="csstest">
   <p>这里是翔子的博客</p>
</div>

效果演示


这里是翔子的博客

利用伪元素清除浮动

这里需要提一下,很多css框架或者门户网站,都使用了伪元素after来清除令人头疼的浮动问题。
原理就不多讲了,网上有很多的解释,上一段利用伪类清除浮动的代码:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/****兼容IE****/
* html .clearfix {height: 1%;}

下面还有一套著名的960网格框架,清除浮动的方法:

 
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
 
 
.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after,
.container_16:before,
.container_16:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
 
.clearfix:after,
.container_12:after,
.container_16:after {
  clear: both;
}
 
 
.clearfix,
.container_12,
.container_16 {
  zoom: 1;
}




转载请注明转自: CSS 2.1 中的伪元素