实例演示CSS中class、id、内联、important样式的优先级

最新推荐文章于 2024-07-07 21:16:58 发布

Lily的秋天

最新推荐文章于 2024-07-07 21:16:58 发布

阅读量3.2k

点赞数 2

分类专栏：前端文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_34285232/article/details/120224024

版权

本文通过实例演示了CSS中class、id、内联样式和important样式的优先级。从body元素继承样式开始，逐步展示class如何覆盖继承样式，id选择器如何优于class，内联样式高于id，以及important具有最高优先级。通过对HTML元素应用不同的CSS规则，解释了浏览器如何解析和应用这些样式，强调了CSS声明顺序和重要性在确定优先级中的关键作用。

摘要由CSDN通过智能技术生成

1.从 body 元素继承样式

2.Class 选择器的优先级高于继承样式

3. ID 选择器优先级高于 Class 选择器

4.内联样式的优先级高于 ID 选择器

5.Important 的优先级最高

1.从 body 元素继承样式

每一个 HTML 页面都有一个 body 元素。

首先，我们先来创建一个内容文本为 Hello World 的 h1 元素。

接着，在 body 的 CSS 规则里面添加 color: green;，这会将页面内所有字体的颜色都设置为 green。

最后，在 body 的 CSS 规则里面添加 font-family: monospace;，这会将 body 内所有元素的字体都设置为 monospace。

代码如下：

<style>
  body {
    background-color: black;   /*页面背景颜色*/
    font-family: monospace;    /*页面字体*/
    color: green;              /*字体颜色*/
  }
</style>
<h1>Hello World!</h1>

此时页面显示如下图右方所示，h1元素内容（字体和颜色）继承了body元素的样式。

这是没有任何其他约束条件时，默认的样式，但是有时候，HTML 元素的样式会跟其他样式发生冲突。就像 h1 元素不能同时设置绿色和粉色两种颜色。

假设有两个h1元素，第二个并不想继承body的样式，怎样才能单独拥有自己的样式呢？

这时候我们引入class选择器。

2.Class 选择器的优先级高于继承样式

让我们尝试创建一个字体颜色为粉色的 class，并命名为 pink-text，将其应用于第二个h1元素中。猜一猜，它会覆盖 body 元素的 color: green; CSS 规则吗？

给第二个h1 元素添加 pink-text class。

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

  /*粉红色样式定义*/
  .pink-text {
    color: pink;
  }
</style>
<h1>Hello World!</h1>                      /*继承body样式*/
<h1 class="pink-text">Hello World2!</h1>   /*使用专属class样式*/