css的权重（一）

在进行css布局中，经常会使用到权重，那么权重是什么意思呢？

css的权重的顺序为：

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

根据 CSS 规范，具体性越明确的样式规则，权重值越高。

那么如何计算权重值呢，下面这张图可以说明计算方法

上图中我们把权重分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值就是权重。

4个等级的定义如下：

1.等级一：代表内联样式，如: style=””，权值为1000。

2.等级二：代表ID选择器，如：#content，权值为100。

3.等级三：代表类，伪类和属性选择器，如.content，权值为10。

4.等级四：代表类型选择器和伪元素选择器，如div p，权值为1。

上图中选择器“ul#NAV LI.ACTIVE A”

权重计算：UL.LI,A为等级四权值为1；#NAV为等级二权值为100；I.ACTIVE为等级三权值为10，加在一起为113。

下面我们来看一下，权重的使用

这里我们做了一个类似京东的导航条，在手机京东这个导航条里，放了一个图片

 

设置手机京东的html代码为

<li class="fore tel-jd">

<i class="tel"></i>

手机京东</li>

在插入图片之前，要设置li的左右边距

css代码如下：

.tel-jd{

    padding: 0 25px;

    background: url();

}

运行之后，效果如下，并没有设置边距

 

当我们将代码修改如下

.shortcut .tel-jd{

    /*上右下左,把左侧整大点*/

    padding: 0 20px 0 25px;

    position: relative;    

}

.shortcut是.tel-jd的祖先元素

运行之后

 

这就是权重使用的必要性。