CSS层叠样式表层叠规则

KuaiKan 11月前 226

CSS(层叠样式表)是浏览器对多个样式来源进行叠加,最终确定结果的过程。

由于样式的来源不同,浏览器在加载样式时,需要计算出最终的样式值,这样才能显示出正确的界面效果——浏览器会通过叠加和覆盖这两种方式来生成最终的样式值。

CSS样式优先级按照就近原则离被设置元素越近优先级别越高)确定。

参考CSS的三种引入方式:外部样式、内部样式和行内样式

https://kuaikan.ink/thread-765.htm

CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级

https://kuaikan.ink/thread-764.htm

下面是举例说明,如下面代码。第一个引自外部式、第二个嵌入式:

p{
     color: red; /*字体颜色为红色*/
     font-weight: bold; /*字体粗细为加粗*/
} /*来自样式表文件*/
p{
     color: blue; /*字体颜色为蓝色*/
} /*来自<style>标签*/

不同来源的两个样式,第一个样式设置了font-weight,第二个没有,浏览器会把它叠加在一起,即浏览器会把各个零散的整合成一个整体。第一个样式color: red;,第二个样式color: blue;根据就近原则,浏览器会让后者覆盖前者,最终结果还是color: blue;。最后显示出来的代码:

p{
     color: blue; /*字体颜色为蓝色*/
     font-weight: bold; /*字体粗细为加粗*/
}

覆盖的默认规则是后者覆盖前者,但是有一个特殊情况——!important。如下面代码:

span{
     color: red !important; /*字体颜色优先显示为红色*/
} /*来自样式表*/
span{
     color: blue;
} /*来自<style>标签*/

最终显示出来的代码如下:

span{
     color: red; /*字体颜色显示为红色*/
}

虽然color: blue;是后来者,但是它没有居上,因为前者color: red;跟着!important。因为!important(英文翻译:重要的)的作用是提高指定CSS样式规则的应用优先权。

最新回复 (0)
返回