css样式的优先级究竟庞杂到什么程度

2024-08-30 08:34:59

字体：大中小

来源：转载

供稿：网友

昨晚在看一道面试题，发现有一部分人对css样式的优先级不是特别清楚，加之之前自己也一直在总结这个知识点，今天就利用点时间把我所了解的写下来，大家共同进步...
css样式的优先级是一个庞杂的知识点，我甚至觉得它的庞杂可以与“浮动”以及“框模型”相提并论。对于本文，我思考了许久，或许可以用这么一句顺口溜来总结，即“一载二位三重要四特殊”。下面具体展开：

一、“载”
这里的“载”，是载体，即样式表。对于开发人员来说，经常涉及到的只是“载”之一，除此之外，还有两个。它们是什么呢？具体如下：
1、用户端样式表：这是浏览器默认的样式表，在遵守其规则的情况下，才有了div的原始属性是“display:block”，span是“display:inline”。
2、用户样式表：即使用浏览器的人定义的样式表。也许你不能理解，但是事实是你可以做到，具体设置方法，我以firefox为例，步骤如下：（1）菜单栏 “帮助”-->疑难排解信息-->应用基础-->打开所在文件夹-->chrome；（2）创建一个名为 userContent.css 的 CSS 文件，编辑加入所需要的样式，保存。注意名字必须叫 userContent.css，不能更改。否则无效；（3）重启firefox。我以w3cfuns首页“热门讨论”为例，对其样式进行了设置，呈现的结果如下：

而原本的效果如下：

通过上述方面，我们是可以来自动地改变网站的呈现方式的。
3、作者样式表：这个就是我们最熟悉的了，就是开发人员所书写的样式表。而我们经常所说的样式表，其实就停留在这个层面上，因为它与我们最亲密！

二、“位”
之所以把“位”放在第二点来说，有如下的考虑：（1）“位”指代两点：样式声明的位置和样式表链接的位置；（2）不管是样式声明的位置或者样式表链接的位置，都是具体到对开发人员来说的，也就是“载”中的第3点，因此必须先说清“载”。

说清了理由，下面具体到“位”，就如理由中的第一点，我将从两点展开：
1、样式声明的位置：样式的声明一搬来说有四种方式，除去@import和另外一种（几乎没用过，以至于忘了名称了），目前常见的就两种：行内式和外联式，行内用style标签，外联用link标签。在这点上，排除style样式的干扰（第四点会提到），样式优先级遵循后来居上的原则，也就是说，样式表里后面声明的样式较之前面声明的优先级更高。比如：在style.css这个文件里，在第一行声明了这样的样式：

复制代码

上一篇：我的css架构理念―因人而异没有最优只有适合

下一篇：三种方式实现元素水平居中显示与固定布局和流式布局概念理解