[分享]css内嵌样式优先级

发布于 2024-11-11 15:33:32

CSS内嵌样式是指把样式直接写在HTML文档的style标签中，优先级比普通样式和外部样式都高，下面详细介绍内嵌样式的优先级。 p { color: red; } 首先，内嵌样式的选择器优先级高于普通...

CSS内嵌样式是指把样式直接写在HTML文档的style标签中，优先级比普通样式和外部样式都高，下面详细介绍内嵌样式的优先级。

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

首先，内嵌样式的选择器优先级高于普通样式和外部样式。所以在下面的例子中，p标签的颜色是蓝色，因为内嵌样式的优先级比外部样式的高。

<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    p {
      color: blue;
    }
  </style>
</head>

其次，内嵌样式的优先级比同一选择器的普通样式高。比如：

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

以上代码中，p标签的颜色是蓝色，因为内嵌样式比普通样式高。

最后，内嵌样式的优先级比important关键字低。比如：

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

p标签的颜色是蓝色，因为内嵌样式的优先级比important关键字低。

在使用CSS编写样式时，要注意选择合适的样式优先级，以确保正确的样式效果。

一个月内的热帖推荐

Lv.1普通用户

62849 帖子	14 小组	291 积分

帖子

小组

291

积分

发帖	回复	分享

赞助商广告

本组热帖