css 样式加载的优先级使用经验分享

以下是CSS样式加载优先级的攻略：

一、优先级的定义

CSS样式的优先级是指多个样式应用于同一个元素时，针对该元素的不同CSS属性该如何去选择应用哪个样式规则的算法。CSS优先级是一个重要的概念，可以影响到应用于元素的所有CSS属性的顺序。

二、优先级的计算

计算CSS样式的优先级，可以根据以下三个方面来解决。

1. 第一规则，样式优先级由高到低分别为：内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器。

2. 第二规则，特殊性从高到低，如下：

   1. 1,0,0,0（内联样式）
   2. 0,1,0,0（ID选择器）
   3. 0,0,1,0（类/属性/伪类选择器）
   4. 0,0,0,1（元素/伪元素选择器）

3. 第三规则，后者优先。

这三点规则的组合用于计算每个样式规则的优先级，以便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规则，因为它会过分增加或杀死特定规则的优先级变量，这可能使您无法轻松修改样式表。