CSS式样优先级 _HTML/CSS

CSS样式优先级

CSS继承优先级，留做备忘。

基本html代码：

<!DOCTYPE html>
<html>
<head>
  <title>Test the order of style</title>
  <link rel="stylesheet" type="text/css" href="style/external.css"/>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

?本页面引用了外部样式external.css：

@import url('base.css');
@import url('another.css');

可以看到external.css中又引用了base.css和another.css两个样式表：

在base.css中将p元素颜色设定为黄色，在another.css将p元素颜色设定为蓝色；

这个时候页面中将显示的是【蓝色】，因为，another.css出现在base.css之后，优先级高于base.css；

如果在external.css中将p元素的颜色改为红色，那么页面中最终呈现的颜色将会是【红色】，因为，被import的样色表优先级【低于】引用的样式表。

总的说来CSS中样式表优先级如下：

内部样式表 > 外部样式表 > 外部样式表引用的样式表(被引用的样式表后出现的优先级较高) > 浏览器自带样式