CSS：CSS样式表及选择器优先级总结

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

我们在写网页的时候经常会遇到同一个HTML文件，使用了外部样式、内部样式以及内联样式，那么如果发生冲突时浏览器是怎么抉择的呢？

也会遇到这样的情况，在样式表中，对同一个HTML元素，我们有可能既用到了class，又用到了id，还有继承自父元素的样式，那么如果发生冲突时浏览器又怎么表现呢？

1、样式表的优先级

所谓多重样式，指的是对于相同的HTML元素在三种样式表中都存在样式效果的时候的样式覆盖问题。对于多重样式，也就是三种样式表都存在的情况下，一般来说它们的优先级是：

（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

但是会有一种情况是，如果外部样式表的引入位置在内部样式的后面，也即外部样式表更接近HTML元素，那么外部样式表中的样式会覆盖内部样式表中相同元素的样式。也就是说，如果是对相同的的HTML元素进行样式编辑，在HTML文档流中距离HTML元素近的会覆盖距离HTML元素远的。

<head>
<style type="text/css">
/* 内部样式 */
h1{color:green;}
</style> 
<link rel="stylesheet" type="text/css" href="style.css"/>

</head>
<body>
<h1>Test</p>
</body>

上面代码中，Test会显示为蓝色。若将外部样式和内部样式交换位置，则Test将显示为绿色。

确定了样式表的优先级之后，也就是确定了使用那个样式表中的样式之后，还有一个问题，就是，如果在同一个样式表中，对同一个HTML元素，分别用其id、class、tagName定义了样式，且样式还不相同，那么浏览器会怎么选择呢？这就是接下来要说的选择器的优先级。

2、选择器的优先级

Css选择器优先级计算规则：

根据Css选择器的类型，可以计算出这个样式有多大的优先级：

选择器类型	计算规则
元素标签中定义的样式（Style属性）	加1,0,0,0
每个ID选择符(如 #id)	加0,1,0,0
每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)	加0,0,1,0
每个元素选择符（如p）或伪元素选择符(如 :firstchild)等	加0,0,0,1
其它选择符包括全局选择符*，不过这也是一种specificity。	加0,0,0,0，相当于没加

然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，从左到右逐位比较大小，数字大的CSS样式的优先级就高。

有些人直接就说，内联的加1000，id的加100，class的加10， tag的加1，虽然在结果上是一致的，但是这种说法还是不够有说服力的。

这里需要注意几点：

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

为了更好的理解这些计算规则，举些例子如下：

选择器	计算结果
* { }	0
li { }	1 (one element)
li:first-line { }	2 (one element, one pseudo-element)
ul li { }	2 (two elements)
ul ol+li { }	3 (three elements)
div + *[rel=up] { }	1,1 (one attribute, one element)
ul ol li.red { }	1,3 (one class, three elements)
li.red.level { }	2,1 (two classes, one element)
style=””	1,0,0,0 (one inline styling)
h1 { }	1 (one HTML selector)
div p { }	2 (two HTML selectors)
.hi	1,0 (one class selector)
div p.hi { }	1,2 (two HTML selectors and a class selector)
#hi	1,0,0 (one id selector)
body #darkside .sith p { }	1,1,2 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)