如何理解 CSS 样式表的层叠性

html-css015

如何理解 CSS 样式表的层叠性,第1张

一:层叠性指的是样式的优先级,当产生冲突时以优先级高的为准。

开发者样式>读者样式>浏览器样式(除非使用!important标记 )

id选择符>(伪)类选择符>元素选择符

权重相同时取后面定义的样式

二:

CSS层叠性是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。每个CSS选择器都会有一个权重,当两个选择器同时配置同一元素的同一属性时(比如一个设置color:red,另一个color:black),就会产生冲突,而解决冲突的方案就是CSS选择器的权重,权重高的来覆盖权重低的。

三:层叠性指的是上级标签的样式会自动继承到其所有下级标签,如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中,除非<p>重写了相关样式将其覆盖。

.css文件是指样式表文件,就是把你在HTML里面写的CSS样式代码拿出来做为一个单独的文件,在需要使用导入到页面里面去。 用.css文件可以提高css样式的重复使用率并简化HTML代码。 所谓层叠是因为CSS样式后面的属性会覆盖前面的属性。

层叠指的是样式的优先级,当产生冲突时以优先级高的为准。

1. 开发者样式>读者样式>浏览器样式(除非使用!important标记 )

2. id选择符>(伪)类选择符>元素选择符

3. 权重相同时取后面定义的样式

以下是一段经典的html,三个类名分别为模块、标题和正文。

<div class="mod">

<div class="hd"></div>

<div class="bd"></div>

</div>

大部分html页面都可以由这种结构嵌套或者累加而成。