以下是CSS样式加载优先级的攻略:
一、优先级的定义
CSS样式的优先级是指多个样式应用于同一个元素时,针对该元素的不同CSS属性该如何去选择应用哪个样式规则的算法。CSS优先级是一个重要的概念,可以影响到应用于元素的所有CSS属性的顺序。
二、优先级的计算
计算CSS样式的优先级,可以根据以下三个方面来解决。
-
第一规则,样式优先级由高到低分别为:内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器。
-
第二规则,特殊性从高到低,如下:
- 1,0,0,0(内联样式)
- 0,1,0,0(ID选择器)
- 0,0,1,0(类/属性/伪类选择器)
- 0,0,0,1(元素/伪元素选择器)
-
第三规则,后者优先。
这三点规则的组合用于计算每个样式规则的优先级,以便CSS引擎决定应该将哪个样式规则应用于给定的元素。
我们可以将每个规则发挥作用的位置(例子1),并根据计算的总值(例子2)来比较它们的优先级。
例子1
/* 样式1 */
p {
color: #000;
}
/* 样式2 */
p.highlight {
color: green;
}
/* 样式3 */
#id1 {
color: red;
}
/* 样式4 */
p, li {
color: blue;
}
在使用上述选择器时,应了解以下元素被应用时对应用样式的影响。比较后的结果是:
1. 样式3 > 样式2 > 样式4 > 样式1
例子2
假设以下样式规则应用于一个元素:
p {
color: #000;
}
#id1 {
color: red;
}
p.highlight {
color: green;
}
span, .specialClass {
color: blue;
}
计算后的规则为各组成特殊性值的格式如下:
- 第一个消除步骤,消除问题,每个都设为0;
- 第二个消除步骤,则从左到右比较。
选择器 | 特殊性(0,0,0,1) | 特殊性(0,1,0,0) | 特殊性(0,0,1,1) | 特殊性(0,0,0,2) |
---|---|---|---|---|
p | 0 | 0 | 0 | 1 |
#id1 | 0 | 1 | 0 | 0 |
p.highlight | 0 | 0 | 0 | 2 |
span | 0 | 0 | 0 | 1 |
.specialClass | 0 | 0 | 1 | 0 |
总的特殊性值是:
0,1,1,4
因此,规则p.highlight
优先级最高,其次是#id1
,然后是.specialClass
,最后是p
。
三、结论
1.应避免使用“! important”规则
尽管它可以简化样式操作,但有时会给解决问题增加引用属性。更重要的是,其优先级超过内联样式,无论如何,它都更难调整和更难以重写所有其他固有优先级。
2.合理使用类选择器和属性选择器
避免滥用ID选择器和内联标签,这是拥有最高优先级的CSS选择器类型。相反,建议使用类选择器和属性选择器,例如“input[type=”text”]”,以避免优先级冲突。
3.缩小选择器范围
缩小规则应用的范围,例如使用后代选择器,避免选择器的顺序重复使用同一目标元素,它们的优先级最高。
4.使用继承来代替元素选择器
对于具有相同属性的一组元素,将自身属性与继承的属性组合造成优先级的冲突。因此,建议使用具有完全继承样式的祖先元素的元素选择器,例如“ul li”,而不使用排除继承属性。
四、总结
请尝试合理使用CSS选择器,并理解CSS优先级的一般规则。确保您的CSS样式不仅看起来不错,而且带有较低的冲突程度,并且尽可能避免使用! important规则,因为它会过分增加或杀死特定规则的优先级变量,这可能使您无法轻松修改样式表。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css 样式加载的优先级使用经验分享 - Python技术站