css属性值的计算、选择器权重

最新推荐文章于 2024-08-09 11:34:51 发布

PyPio-Mr•Li

最新推荐文章于 2024-08-09 11:34:51 发布

阅读量224

点赞数 1

分类专栏：前端文章标签： css3 html css

本文链接：https://blog.csdn.net/weixin_45497004/article/details/109645042

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

元素能呈现效果，归功于样式的属性值，同一个样式，属性值不一样，呈现的效果就不一样。在页面呈现出来之前，在我们看不到的地方（浏览器的渲染引擎）进行着复杂的css属性值的计算，在对最后的计算结果属性值进行渲染。

属性值的计算过程

1.确定声明值

我们把样式属性编写在样式表中，就是对该样式属性的声明，告诉渲染引擎我们要用到这个属性。当新的样式表中没有出现旧样式表声明过的属性时，没有被重新声明的属性的属性值不变。如：

.div{   /* 旧样式表 */
	height: 100px;
	width: 100px;
	}

.div{   /* 新样式表 */
	display: none;
	}

新的样式表中，并没有重新声明width和height，所以元素的width还是100px，height还是100px。

2.层叠冲突

当样式表中有冲突的声明时（新旧样式表都声明了同一个属性），我们需要使用层叠规则（比较重要性；特许性；源次序）来判断并确定css属性值：

（1）重要性

重要性排序：添加了！important的样式 > 普通声明的样式 > 浏览器中的默认样式

.span{
	font-size: 20px !important;
	font-size: 30px;
}

“font-size: 30px”会覆盖浏览器的默认字体大小，但是“font-size: 20px;!important”会覆盖“font-size: 30px”，所以最终字体大小会呈现为20px

（2）特殊性（比较选择器的权重）

权重的比较，我们可以用一个4位数规则来进行：

a.千位：内联样式表记在千位，有就记1，否则记0（内联样式表的样式优先级比外联样式表的都大）；
b.百位：百位用来记ID选择器的数量，出现多少个ID选择器，百位数值就是多少；
c.十位：十位用来记类选择器、属性选择器、伪类选择器一共的数量，一共有多少个以上选择器，十位数值就是多少；
d.个位：个位用来记元素选择器（标签选择器）、伪元素选择器的数量，一共有多少个以上选择器，个位数值就是多少；

<style>
    /* 100 + 10 + 10   =120*/
    #div .ul .li{
        font-size: 16px;
    }
    /* 100 + 10 + 1   =111*/ 
    #div .ul li{
        font-size: 20px;
    }
    /* 10 + 10 + 10   =30*/
    .div .ul .li{
        font-size: 30px;
    }
    /* 10 + 100 + 100    =210*/
    .div #ul #li{
        font-size: 60px;
    }
    /* 100 + 100 +100    =300*/
    #div #ul #li{
        font-size: 25px;
    }
</style>
<body>
    <div id="div" class="div">
        <ul id="ul" class="ul">
            <li class="li" id="li">
                我的字体大小是多大！   <!-- 25px -->
            </li>
        </ul>
    </div>
</body>

（3）源次序

按照代码在文档中的顺序：后来居上；

.span{
	font-size: 20px;
	font-size: 30px;
}

如上，“font-size: 30px;”会把“font-size: 20px;”覆盖，最后字体大小会是30px

3.继承性

在样式表中，有些属性的属性值可以继承父级元素中对应属性的属性值；如果有属性经过上面两步的计算仍然没有赋予属性值，并且是可以继承属性值的属性，会继承父级元素的属性值

可继承属性：所有 line-/font-/text- 开头的属性、color、visibility和cursor

<style>
    #div{
        font-size: 25px;
        text-align: center;
        line-height: 25px;
    }
</style>

<body>
    <div id="div" class="div">
        <ul id="ul" class="ul">
            <li class="li" id="li">
                我的字体大小是多大！
                <!-- 25px -->
            </li>
        </ul>
    </div>
</body>