[分享]css内联与外联优先级

CSS内联与外联优先级是前端开发中常见的一个问题，这里我们详细介绍一下它们的优先级关系：首先，我们需要了解在不同的情况下，选择器的优先级排序如下：优先级 表示方式 important 直接在样式属性后...

CSS内联与外联优先级是前端开发中常见的一个问题，这里我们详细介绍一下它们的优先级关系：

首先，我们需要了解在不同的情况下，选择器的优先级排序如下：

优先级              表示方式
!important             直接在样式属性后加!important
内联样式 <p style="color: red;">ID选择器 #example类选择器、属性选择器、伪类选择器 .example, [type="text"], :hover元素选择器、伪元素选择器 p, ::before通配符选择器 *继承和默认值              无需选择器，直接应用于元素

接下来，我们来分析内联样式与外联样式的优先级关系。

如果在同一个标签元素中同时使用内联样式和外联样式，那么内联样式拥有最高优先级，即便该样式的选择器优先级低于外联样式中的特定选择器。因此，内联样式中声明的属性会覆盖外联样式表中相同的属性。

<style>
  p {
    color: blue;
  }
</style>
<p style="color: red;">Hello world!</p> 

上述代码中，由于内联样式的声明优先级更高，所以文字颜色将是红色。

如果外联样式表中定义的选择器与元素的内联样式协作，那么外联样式表中特定选择器定义的属性会覆盖内联样式的相应属性。

<style>
  p {
    color: blue !important;
  }
</style>
<p style="color: red;">Hello world!</p> 

上述代码中，在外联样式表中使用了!important规则，即便相应元素拥有内联样式，也能将外联样式表中的属性值优先应用于该元素。

综而言之，内联样式比外联样式表具有更高的优先级，但拥有!important规则的外联样式表将优先于任何内联样式。