对CSS挑选器权重的了解(亲测)

2021-03-21 06:59 jianzhan


拷贝编码
编码以下:

<style type="text/css">
div.ui_infor p {font-size: 16px;}
.ui_infor p {font-size: 14px;}
</style>


拷贝编码
编码以下:

<div class="ui_infor">
<p>test of css</p>
</div>

以上事例,最后的显示信息实际效果是 font-size: 16px,其实不是后边的font-size: 14px;
这类组成的挑选器有迅速方式分辨:
0,0,0,0
第1位标值是意味着写在标识上的款式,如

拷贝编码
编码以下:

<p style="font-size: 14px;"></p>

第2位标值意味着的是id挑选器,如 #demo {}
第3位标值是意味着: 类名( .demo {} )或 伪类(:hover)或 特性挑选器[rel=”xx”]
第4位标值是意味着:标识挑选器 p {}
如今用第1个事例来实践活动下:

拷贝编码
编码以下:

div.ui_infor p {font-size: 16px;}

它的权重是:0,0,1,2

拷贝编码
编码以下:

.ui_infor p {font-size: 14px;}

它的权重是:0,0,1,1
結果:0,0,1,2 > 0,0,1,1,因此显示信息font-size: 16px;
填补:! important权重是最高的,因此就无需分辨了,但在IE⑹访问器中点BUG。
事例:

拷贝编码
编码以下:

p {font-size: 18px !important;font-size: 12px;}

在IE⑹访问器里边,是显示信息font-size: 12px,在网上一些材料说IE⑹不适用!important,实际上是不对的。
大家在看看事例:

拷贝编码
编码以下:

p {font-size: 18px !important;}
p {font-size: 12px;}

在IE⑹中是显示信息font-size: 18px,这就表明了IE⑹是适用!important,只是主要表现有点奇异,奇异的地区便是:写在同行业的同名款式中 !important的特性被后边的遮盖,
就如 p {font-size: 18px !important;font-size: 12px;} 这个事例,font-size: 12px遮盖了font-size: 18px !important。
运用这个奇异,便可以在IE⑹中,不应用CSS_hack,完成“min-height”

拷贝编码
编码以下:

p { min-height: 50px;height:auto !important;height:50px;}