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

重温css(7)——选择器的优先级

时间:2023-03-31 00:16:20 CSS

在上一节中,我们知道了选择器的种类有很多种。可以通过不同的选择器方法选择相同的元素。这个时候选择哪个selectorstyle最后会显示什么?具体程度具体程度表示一个css选择器表达式的重要性。每个选择器表达式都可以通过公式计算出一个值。数字越大,越重要。此公式称为“I-C-E”计算公式:I——Id;100C——级;10E——元素;加100,遇到类指定值加10,遇到元素指定值加1。例如:注意:!important的优先级最高,高于以上所有。*选择器是最低的,低于其他所有选择器。这个公式也可以简单的通过三个规则来计算:规则1,包含ID的选择器优于包含Class的选择器,包含Class的选择器优于包含元素的选择器规则2,比较不同选择器的特异性时,是否不区分加载顺序(同一个选择器级联时,后加载的优先于先加载的),例如:Jerry

#div1{color:红色的;}.div1{color:blue;}//虽然后面加载了.div1,但是特异性较低,所以最后还是显示红色。颜色是红色