- 选上了,先比权重,相同情况下谁CSS在下面谁屌;没选中,先比较距离相应HTML元素的远近;如果相同,则比较权重;如果权重相同,谁CSS在下面谁屌。!important只影响同级。
- 多层相同标签嵌套,只要有选中的可能就表示选中。
div div{}//选中了第二个和第三个div div{}//选中了三个div <div> <div> haha <div>hehe</div> </div> </div>
- 继承性
对元素设置属性后其后代会继承同样属性。 color/text-开头的/line-开头的/font-开头的文字样式的都会被继承。 盒子的/定位的/都不会被继承
- 层叠性:即CSS处理冲突的能力,权重计算不存在兼容问题
如果选中,分别统计其id选择器/类选择器/标签选择器数量计算权重,谁大谁决定。255个选择器权重等于一个前面选择器 并集选择器(,)要拆开分别计算;子选择器>不影响权重计算 如果权重一样,谁写在后面谁决定。一个元素有多个类名,权重相同时依然是CSS谁写在后面谁决定, .c1{color:red;} .c2{color:blue;}//后面 <P class="c1 c2">blue</p> <P class="c2 c1">blue</p> 如果未选中相应元素,通过继承来的权重为0,权重都为0,谁离相应HTML元素近谁决定,一样近,判断id/class/类权重,权重一样谁css在下面谁屌
- !important.加!important无比屌,权重无比高,只改变相应行的权重。同等情况下无法提升继承的权重
p{ color:red !important; font-size:10px; } .c1{ color:blue; } #id1{ color:green; font-size:20px; } <p class="c1" id="id1">jierbangying</p>//red 20px
- 都是继承,则按HTML距元素就近原则。同样近,同样按id/class/标签计算排序,此时!important可提升权重。
5.CSS继承性(inherited)与层叠性
最新推荐文章于 2023-08-02 16:26:17 发布