[分享]css内部权重大于外部权重

CSS内部权重大于外部权重是CSS中一个基本的概念，对于初学者来说，理解这个概念是非常重要的。 p { color: red; } 如上代码所示，我们在style标签中为p标签设置了一个红色的颜色，这...

CSS内部权重大于外部权重是CSS中一个基本的概念，对于初学者来说，理解这个概念是非常重要的。

<style>
  p {
    color: red;
  }
</style> 

如上代码所示，我们在style标签中为p标签设置了一个红色的颜色，这是一个内部样式表。

<link rel="stylesheet" href="style.css"> 

同时，我们也可以通过外部样式表来控制页面元素的样式。如上代码所示，我们在html文档的头部引入了一个外部样式表，其中的样式优先级是比内部样式表低的。

p {
  color: blue;
} 

接下来，我们重新定义了p标签的颜色，这个样式在外部文件中定义的，它的优先级是比内部样式表低的。

那么，当我们同时应用了内部样式表和外部样式表时，哪个样式应用呢？答案是内部样式表的样式会被应用，这就是因为CSS内部权重大于外部权重。

如果我们想要改变样式应用的优先级，可以使用!important关键字，它可以把某个样式的优先级提升到最高。

p {
  color: green !important;
} 

如上代码所示，我们为一个p标签设置了一个绿色的颜色，并且使用了!important关键字，这个样式将会被优先应用。

总之，在CSS中要理解优先级这个概念，同时也要了解内部样式表和外部样式表的优先级关系。