css选择器的权值与优先规则

前言

在html设计当中，经常会遇到一个问题——如果对同一标签的相同属性设置了不同的值，那么哪一个值是有效值呢？答案就是权值高的覆盖掉权值的值，权值相同的采取就近原则。

什么是权值

在css当中有多种选择器，它们的权值是不同的，看下图

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

4个等级的定义如下：

1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为100。
3. 第三等：代表伪类和属性选择器，如.content，权值为10。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

例如上图为例，其中#NAV为二等选择器，.ACTIVE为三等选择器，UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113

注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

注意：通用选择器的权重为0，子选择器和兄弟选择器权重暂不做说明

 

就近原则

当权值相同的情况下怎么办呢，这个时候就要看就近原则了。

大家都知道css有4种引入方式，除了行内式以外，后设置的值会覆盖前面设置的， 因为剩余三种引入方式都是在头部引入，后设置也就离目标属性更近，也就是就近原则了。

不知道css有哪四种引入方式的童鞋可以看看CSS的四种引入方式

特殊的！important

在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面。