CSS 层叠式-理解层叠性和继承性

2023-03-14,,

CSS的概念中,除了前面提到的样式外,还有一个重要的概念就是层叠式,层叠式是贯穿整个css的一个性质,包含继承性和层叠性。

继承性:

• 如果一个标签没有设置过一些样式,它的某个祖先级曾经设置过,在浏览器中该标签也加载了这些样式,这些样式都是从祖先级继承而来,这种现象就是继承性。
• 能够被继承的样式是所有的文字相关样式属性,其他的属性都不能被继承。

浏览器控制面板:

继承性应用:

• 继承性是一个很好的性质,可以将页面中出现最多的文字样式设置给一个较大的祖
先级标签比如 <body>,后期所有的后代标签都可以从 <body> 进行继承。

层叠性:

• 思考问题:同一个标签可以被多个选择器选中,如果选择器后面设置了相同的样式属性,标签最终该加载哪个?或者,在继承性中,如果多个祖先都设置了相同的文字样式,后代中该继承哪个祖先级的?
• 解决方法:就是使用层叠性去解决冲突。多个选择器在进行对比的过程中,最终只有一个属性会成功加载,它会层叠、覆盖掉其他的属性。
• 判断最终胜出的属性是谁,需要依赖判断优先级。

判断方法:

选中目标标签:

• 第一步:比较多个选择器的权重,权重高的层叠权重低的。
• 基础选择器的权重:根据选择范围,范围越大权重越小,* < 标签选择器 < 类选择器 < id 选择器。
• 高级选择器权重比较方法:依次比较组成高级选择器的 id 的个数,类的个数,标签的个数,如果前面能够比较出大小就不再比较后面,如果前面相等就往后比较,直到比较出大小。
• 比较顺序:( id 个数, 类的个数, 标签的个数 )
• 第二步:如果选择器权重都相同,需要比较 CSS 中代码的书写顺序,后写的层叠先写的。

选中目标标签的组先级 :

• 如果选择器选中的是祖先元素,文字的样式可以被继承。
• 第一步:比较就近原则,比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近,近的层叠远的。
• 第二步:如果选中的祖先级距离目标一样近(同一个祖先级),比较选择器权重,权重大的层叠小的。
• 第三步:如果距离一样近,权重也相同,最后比较 CSS 中的书写顺序,后面的层叠前面的。

! important 关键字:
如果在比较选择器权重的过程中,遇见一个!important关键字,可以将某条CSS样式属性的权重提升到最大。
书写位置:在某个css属性的属性值后面空格加!important。
注意:
①就近原则中,不需要比较选择器权重,所有important会失效。
②important不能提升选择器的权重,只能提升某条属性的权重到最大。

行内式权重 :

• 行内式样式与内嵌式或外链式样式比较权重时,行内式的权重最高。
• 但是,与 !important 关键字相比权重要低。

总结:
 

 

CSS 层叠式-理解层叠性和继承性的相关教程结束。

《CSS 层叠式-理解层叠性和继承性.doc》

下载本文的Word格式文档,以方便收藏与打印。