[分享]css元素优先级别

CSS元素优先级别是影响CSS样式应用的一个重要概念。在网页中，当多个CSS规则同时应用于同一个元素时，就需要根据优先级别决定应用哪条规则。CSS元素优先级别一般由以下三个部分组成：行内样式 实例样...

CSS元素优先级别是影响CSS样式应用的一个重要概念。在网页中，当多个CSS规则同时应用于同一个元素时，就需要根据优先级别决定应用哪条规则。

CSS元素优先级别一般由以下三个部分组成：

行内样式 - 实例样式 - 外部样式 

其中行内样式是指直接在HTML标签中使用style属性设置的样式；实例样式是指使用id选择器指定的样式；外部样式是指使用class选择器或标签选择器指定的样式。

在三种样式中，行内样式的优先级别最高，实例样式次之，外部样式最低。具体来说，CSS优先级别的计算方法如下：

行内样式：1000
每个id选择器：100
每个class选择器、属性选择器或伪类选择器：10
每个元素或伪元素选择器：1 

按照这个计算方法，当一个元素同时应用了多个CSS规则时，优先级最高的规则就会被应用。例如：

<div style="font-size:14px;" class="text" id="title">标题</div>

#title {
  font-size: 24px;
}

.text {
  font-size: 18px;
} 

在上面的例子中，元素同时应用了行内样式、id选择器和class选择器指定的样式。根据CSS元素优先级别的计算方法，行内样式的优先级别最高，所以元素最终的字号是14px，而不是18px或24px。

总之，了解CSS元素优先级别是编写优秀网页样式的基础之一，可以帮助我们更好地掌控样式的应用效果。