CSS权重
概念:去计算CSS选择器的优先级大小,即权重,谁的选择器权重大,css就表现谁的属性,条件 必须是对同一个html 标签的同一个属性进行设置时 才出现优先级问题,才需要去比较优先级,即权重大小。(若权重值一样,谁写在后面就用谁的属性)
?
方法一: ①加法
原理每种css选择器的权重值不一样,然后那么我们可以将选择器的权重值进行相加,再进行比较
分配,
id选择器权重值100.
class选择器权重值10.
标签选择器权重值 1.
伪类选择器权重值为1.
比较
例如:.box#myspan 和 p#myspan
.box#myspan :100+10=110
p#myspan: 1+100=101
body div p span:4
? ? <style>? ? ? ? ? .box{? ? ? ? color: red;? ? }? ? </style>??</head><body>? ? <div class="box"> div中的内容? ? ? ? <p id="myp"> p标签的内容 ? <span id="myspan">span标签的内容</span> ?</p>? ? </div>
给div设置:
?
给P标签设置
?
给span标签设置
?
组合选择器:
?
?
方法二 ②4个0
比较基础选择器的数量来进行权重大小判定
语法 (0,0,0,0)
第一个0表示是否是行内样式(style属性),是则为1,否0
在body 标签中写style="",才算行内样式
第二个0表示拥有id选择器的数量
第三个0 表示拥有class选择器的数量
第四个0 表示拥有标签选择器的数量
比较规则
1.从第一个0 开始比较两者数量谁大就用谁的,如果数量一样就比较第二个0,依次类推。
eg: ① .box#myspan 和 p#myspan
.box#myspan(0,1,1,0) (√)
p#myspan(0,1,0,1)
② .box #myp #myspan & #myp#myspan
.box #myp #myspan (0,2,1,0) (√)
#myp#myspan (0,2,0,0)
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #css标签权重 #必须是对同一个html #标签的同一个属性进行设置时 #1