[分享]css元素显示优先级

CSS元素的显示优先级是指当多个样式同时作用于一个元素时，哪个样式会优先被显示。CSS中有三种方法指定样式，它们的优先级从高到低分别为：important > 内嵌样式 > 外部样式1. ...

CSS元素的显示优先级是指当多个样式同时作用于一个元素时，哪个样式会优先被显示。CSS中有三种方法指定样式，它们的优先级从高到低分别为：

!important > 内嵌样式 > 外部样式

1. !important
加上!important即可让某个样式具有最高的显示优先级，即使其它样式也作用于该元素。举个例子：

color: red !important;

这条样式会优先于其它样式显示，无论该元素应用了多少个样式。然而，滥用!important会导致代码不易维护和调试，建议在必要的时候使用。

2. 内嵌样式
在HTML元素中使用style属性设置样式，会覆盖外部样式表中相同的样式，但不能覆盖!important样式。举个例子：

<div style="color: blue;">hello world!</div>

这条样式会优先于外部样式表中的相同样式。

3. 外部样式表
外部样式表是最常用的样式指定方法。外部样式表会作用于整个页面中包含的元素，除非某个元素使用了内嵌样式或!important样式，否则外部样式表会按照其对应的样式来显示。举个例子：

CSS文件中的样式：

#myDiv {
  color: green;
}

HTML文件中的元素：

<div id="myDiv">hello world!</div>

这条样式会优先于HTML中内嵌样式或未加优先级的样式，但不会覆盖!important样式。

在实际开发中，为了避免不必要的麻烦，除非必须，我们不建议使用!important样式。合理使用内嵌或外部样式表可以让网站代码更加清晰和易于维护。