html5css选择器优先级 CSS选择器优先级[重要]

CSS选择器优先级

浏览器是通过判断CSS优先级，来决定到底哪些属性值是与元素最为相关的，从而作用到该元素上。CSS选择器的合理组成规则决定了优先级，我们也常常用选择器优先级来合理控制元素达到我们理想的显示状态，下面我们来具体了解下CSS选择器优先级及权重。

CSS选择器如何计算？

当CSS选择器权重相同，则最后的声明的CSS选择器覆盖靠前的 CSS。

CSS优先级是根据由每种选择器类型构成的级联字串计算而成的，它不是一个对应相应匹配表达式的权重值。

相同CSS表达式，在DOM结构中的距离是不会对元素优先级计算产生影响的。

CSS优先级顺序

下列是一份优先级逐级增加的选择器列表：

通用选择器

元素(类型)选择器

类选择器

属性选择器

伪类

ID 选择器

内联样式

多重样式(Multiple Styles)

如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级为：(外部样式)External style sheet

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

示例如下：

h3{color:green;}

结果：标签内的数据显示为蓝色

CSS 优先级规则：

选择器都有一个权值，权值越大越优先。

当权值相等时，后出现的样式表设置要优于先出现的样式表设置。

创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。

继承的CSS 样式不如后来指定的CSS 样式

在同一组属性设置中标有“!important”规则的优先级最大。

CSS !important 规则实例：

#redPp{

color:#00f!important;

color:#f00;

}

color

color