CSS基础3.1--特性之CSS基础3.1-特性之层叠性

开发技术 CSS

字数统计: 982阅读时长: 3 min

 2018/08/01 

层叠和继承是CSS最基本的两个特性，本篇将对CSS基础3.1-特性之层叠性相关内容简单介绍。 # CSSCSS基础3.1-特性之层叠性: ## 1> CSS 样式表的优先级：按照CSS 的起源可以将网页定义的样式分为4种：HTML、作者、用户、浏览器。HTML表示元素的默认样式；作者就是创建人，即创建网站所编辑的CSS；用户也就是浏览网页的人所设置的样式；浏览器就是指浏览器默认的样式。原则上讲，作者定义的样式会优先于用户设置的样式，用户设置的样式优先于浏览器的默认样式，而浏览器的默认样式会优先于HTML的默认样式。特别的，在CSS2中，当用户设置的样式使用了!important命令声明之后，用户的!important的命令会优先于作者声明的!important命令。

2>CSS样式的优先级

对于相同CSS起源来说，不同位置的样式器优先级也是不同的。一般来说，行内样式会优先于内嵌式样式表，内部样式表会优先于外部样式表。即行内 > 内嵌式 > 外部。而被附加了!important关键字的声明会拥有最高的优先级。如在实际开发中，如果作者设计网页字体颜色为14号黑色字体，而用户在浏览器中利用firefox的firebug插件修改字体为18号红色字体，浏览器如何处理呢？根据CSS层叠规则：作者设计的样式能够覆盖浏览器默认设置的样式，而用户在浏览器里设置的样式可以覆盖作者的样式。(上图所示)同时，CSS根据样式的远近关系来决定层叠样式的优先级：在同等条件下，距离应用对象(也就是标签)的距离越近就越有较大的优先权，因而行内样式的优先权大于内部样式和外部样式。如果多个不同类型的选择器同时对一个对象设置样式时，该对象最终样式由一个优先级加权值决定，下面是计算方法：

标签选择器：优先级加权值为1；
伪元素或伪对象选择器：优先级加权值为1；
类选择器：优先级加权值为10；
属性选择器：优先级加权值为10；
ID选择器：优先级加权值为100；
其他选择器(如：通配选择器等)：优先级加权值为0；

以上加权值数为起点来计算每个样式中选择其的总加权值数，计算规则如下：

统计选择器中的ID选择器个数，然后乘于100；
统计选择器中类选择器的个数，然后乘以10；
统计选择器中的标签选择器的个数，然后乘于1；

最后将所有加权指数相加，即可得到当前选择器的总加权值。以此来判断哪个样式的优先级大。
对于多个选择器组合而成的复合型选择器，首先分别计算每个组成选择器的加权值，接着相加得出当前选择器的总分，哪个分值高则选择哪个所设置的样式。对于分值相等的情况，则按上述的位置关系判断。
如：

h3{color: #ff7300;}        /*加权值=1*/
.fl4{font-size: 14px;}     /*加权值=10*/
#head{width: 960px;}       /*加权值=1+10=11*/
#head h2{border: 1px soild #ff73;}    /*加权值=100+1=101*/

如果调整样式的优先级，还可以使用!important命令，它表示最大优先级，注意：该命令必须放在生命语句和分号之间，否则无效。 这里附上CSS选择器的详细。

原文作者：f10@t

原文链接：https://lzwgiter.github.io/posts/4655c16f.html

发表日期：August 1st 2018, 9:30:35 pm

更新日期：August 25th 2021, 7:24:22 pm

Next Post

CSS基础3.2--特性之CSS基础3.2--特性之继承性
Previous Post

CSS基础2--CSS基础2-应用

CATALOG

1. 2>CSS样式的优先级