当前位置: 首页 > Web前端 > CSS

CSS层叠机制

时间:2023-03-30 22:05:38 CSS

css中为什么要有层叠机制因为css中可能有多种样式同时影响同一个元素的某个属性,层叠机制可以解决作者的问题(那个人编写代码),用户(浏览页面的人)和用户代理(通常是浏览器)有风格冲突。级联中的每个样式规则都有一个权重值。当多个规则同时生效时,权重最高的规则优先。一般来说,作者指定的风格权重值高于用户风格权重值,用户风格权重高于客户端(用户代理)权重值。一般重量值和对象,是否有!重要的是,特异性与位置的顺序有关。按层叠顺序,以下权重值从小到大(1)user-agent风格(2)user-general风格(3)author-general风格(4)author-important风格(!important)(5)user-importantstyles(!important)(6)如果两个样式来自同一个代码,比如都来自作者(代码),并且它们的样式声明同样重要,那么就按照特异性来计算,一个specificity高的会覆盖specificity低的(7)如果specificity程度相同,后面的样式优先级越高,为什么用户设置的重要样式比作者重要样式的优先级高?选择器特异性的计算(1)如果元素的style属性中出现声明,则将a计为1;(2)b等于选择器中所有ID选择器的和(3)c等于选择器中所有类选择器、属性选择器、伪类选择器的和(4)d是等于选择器中所有标签选择器和伪元素选择器的总和,a-b-c-d为选择器的特异性程度,比较顺序从a开始,先大者优先。注:继承优先级最低,无特异性组合(如+、>)和通用选择器(*)特异性为0.box{}/*specificity=0,0,1,0*/.boxdiv{}/*specificity=0,0,1,1*/#navli{}/*specificity=0,1,0,1*/p:first-line{}/*specificity=0,0,0,2*/style=""/*特异性=1,0,0,0*/