CSS样式覆盖优先级小结

最新推荐文章于 2025-05-19 20:15:25 发布

cellinlab

最新推荐文章于 2025-05-19 20:15:25 发布

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： CSS CSS样式优先级 CSS覆盖优先级 CSS !important CSS技巧

本文链接：https://blog.youkuaiyun.com/funkstill/article/details/87565516

前端基础专栏收录该内容

167 篇文章

订阅专栏

本文总结了CSS样式的覆盖优先级，包括class、id、行内样式和!important的优先级关系。通过实例展示了如何通过不同方式改变元素颜色，强调了在CSS声明顺序、id选择器和!important关键字在确定样式优先级时的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每一个 HTML 页面都有一个 body 元素。通过将其 background-color 设置为黑色，我们可以证明 body 元素的存在。

<style>
  body{
    background-color:black;
  }
</style>

可以像对其他 HTML 元素一样对你的 body元素应用样式，并且所有其他元素将继承你的 body 元素的样式。

<style>
  body {
    background-color: black;
    color:green;
    font-family:Monospace;
  }

</style>
<h1>Hello World</h1>

当我们创建一个使其文字为粉色的 class然后将其应用到某元素。我们的 class 会 override（覆盖） body 元素的 color: green; CSS 属性

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text{
    color:pink;
  }
</style>
<h1 class="pink-text">Hello World!</h1>

class 会覆盖 body 元素的 CSS，再创建一个把元素设置为蓝色的名为 blue-text 的 CSS class，确保它在 pink-text class 声明的下面。除了 pink-text class 之外，再把 blue-text class 应用到 h1 元素。在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明，它覆盖了 .pink-text 属性。

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text{
    color:blue;
  }
</style>
<h1 class="pink-text blue-text">Hello World!</h1>

浏览器读取 CSS 的顺序是从上到下，这意味着，在发生冲突时，浏览器会使用最后的 CSS 声明。但是并非只有这些，还有其他覆盖 CSS 的方法。

通过为 h1 元素添加 id 并设置 id 的样式，使h1 元素变成 orange（橙色）。给 h1 元素添加名为 orange-text 的 id 属性。在你的 style 元素中为 orange-text id 创建一个 CSS 声明。

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
  #orange-text{
    color:orange;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

无论在 style 元素 CSS 的哪个位置进行声明，id 声明都会覆盖 class 声明。还有其他覆盖 CSS 的方法。试着用 in-line style（行内样式） 使 h1 元素变为白色。发现，行内样式将覆盖style 中定义的所有 CSS。

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color:white">Hello World!</h1>

很多情况下，会使用 CSS 库，这些库可能会意外覆盖掉自己的 CSS。所以当需要确保某元素具有指定的 CSS 时，可以使用 !important。给 pink-text 元素的 color 声明加上关键字 !important，以便 100% 确保 h1 元素是粉色的。

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>