css伪类详解

来源：互联网发布：stl源码解析编辑：程序博客网时间：2024/06/06 13:05

关于:before和:after

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

#example:before {    content: "#";    color: red;}#example:after {    content: "$";    color: red;}

这段代码会在#example元素内容之前插入一个'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素，效果如下:

#Here is the example content$

需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。

#example:before {    content: "";    display: block;    width: 100px;    height: 100px;}

伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。

除了插入文字内容，还可以指定其他内容：

p:before {    content: url('img.jpg');}a:after {    content: attr(href);}

attr()函数会返回指定元素对应属性的值

最后，奉上最惦记的浏览器支持情况

Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
Pretty much all mobile browsers.

放在伪类元素里面的内容一般都只是装饰性的，所以即便是IE6/7不支持也应该能降级到正常显示主体内容。

:before和:after的一些惊人用法

clearfix hack

如果父元素容器里面的子元素是浮动元素的话，我们一般需要在父元素闭合前添加一个clear:both的元素用于清除浮动从而能使父容器正常被子元素内容撑起，但是这种方法引入了多余的无意义标签，并且有javascript操作子元素的时候容易引发bug。一种更好的方法是利用CSS，所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没，只要在父容器上应用这个类即可实现清除浮动。下面是利用:before和:after的一个实现：

/* For modern browsers */.clearfix:before,.clearfix:after {    content:"";    display:table;}.clearfix:after {    clear:both;}/* For IE 6/7 (trigger hasLayout) */.clearfix {    zoom:1;}

CSS实现的八卦图案

#bpic{    width: 96px;    height: 48px;    background: #eee;    border-color:#000;    border-style: solid;    border-width: 2px 2px 50px 2px;    border-radius: 100%;    position: relative;}#bpic:before {    content: "";    position: absolute;    top: 50%;    left: 0;    background: #eee;    border: 18px solid #000;    border-radius: 100%;    width: 12px;    height: 12px;}#bpic:after {    content: "";    position: absolute;    top: 50%;    left: 50%;    background: #000;    border: 18px solid #eee;    border-radius:100%;    width: 12px;    height: 12px;}

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

我们回顾一下，空标签清浮动是这样：

height:0;overflow:hidden;是为了使标签不占空间而做的设置，真正起作用的命令其实很简单，就是clear：both；无论用什么方法清浮动，都是为了使这个命令起作用。
after伪对象清浮动也是这样的，只不过after伪对象是在目标元素后创造了一个虚拟元素，然后给这个虚拟的元素设置clear：both。

.clearfix:after{
        display:block;
        content:"";
        height:0;
        clear:both;
        overflow:hidden;
     }

以上其实就是after伪对象清浮动的核心语句了，clear:both;有了。

height:0; overflow:hidden;照例是为了让内容不占地方，不打乱布局。

content:"";内是伪对象的内容，类似我们总习惯在清浮动的空标签内写个空格（貌似不写也没出过什么问题），引号内随意写内容或者不写也行。但这个属性一定要写上，否则清浮动无效！

display:block;是因为after伪对象默认是行内元素的，我们需要把它转成块元素。

通过以上的设置，其实就在现代ie8以后的浏览器中完美实现清浮动了。

关于ie6和ie7的兼容写法有几种：

方法一：

.clearfix{display: inline-table;} /* Hides from IE-mac \ */
* html .clearfix{height: 1%;}
.clerafix{display: block;} /* End hide from IE-mac */

方法二：

.clearfix{display:inline-block;}

.clearfix{display:block;}

看着各种方法纷乱复杂，其实所有方法的本质都是：触发ie的layout！
所以after伪类最终的写法如下：

    .clearfix:after{
          display:block;
      content:"";
      height:0;
      clear:both;
         overflow:hidden;
     }

.clearfix:{zoom:1;}

实现效果如下：

<span style="font-size:14px;"><!DOCTYPE html><html><head><meta charset="utf-8"/><title>after伪对象清浮动 </title><meta name="keywords" content=""><meta name="description" content=""><style type="text/css">    *{ padding: 0; margin: 0;}   .clearfix{border:1px #000 solid; width: 400px; height: 400px; margin: 0 auto;}    .b{height:100px;width:100px;border:1px red solid;float:left; margin: 10px;}    .c{height:100px;width:100px;border:1px blue solid;float:left;margin: 10px;}    .clearfix:after{        display:block;        content:"";        height:0;        clear:both;        overflow:hidden;     }     .clearfix{zoom:1;}</style></head><body><div class="clearfix">    <div class="b"></div>    <div class="b"></div>    <div class="c"></div></div></body></html></span>

这里需要注意的是，.clearfix必须是一个块元素。若是需要.clearfix是一个行内元素怎么办呢？

如下设置：

.clearfix{display:inline-block;}

.clearfix{*display:inline;} /* 用hack做ie6 7的兼容 */

在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。解决方案是在float的标签样式控制中加入——_display:inline; 将其转化为行内属性。（_这个符号只有ie6会识别）

_position:relative;

注意下划线_的作用

0 0