[分享]css中body和div的优先级

发布于 2024-11-11 19:23:11

在CSS编程中，有时候我们会用到body选择器和div选择器，这两个选择器的优先级是不同的，下面我们来具体了解一下。

body {
  color: red;
}

div {
  color: blue;
}

上面的代码中，我们先给body设置了字体颜色为红色，然后又给div设置了字体颜色为蓝色。接下来我们在HTML文档中添加以下内容：

<!DOCTYPE html>
<html>
<head>
  <title>优先级实例</title>
</head>
<body>
  <div>这里是div，字体颜色应该是蓝色</div>
</body>
</html>

我们会发现，实际上div的字体颜色并不是蓝色，而是红色。这是因为body选择器的优先级比div选择器高。

SCSS中加入!important可以覆盖普通优先级的样式:

body {
  color: red !important;
}

div {
  color: blue;
}

代码中，我们为body的颜色属性加入了!important关键字，这样即使div的优先级更高，也会以body的颜色为准。需要注意的是，!important的使用应该尽量避免，因为它可能导致样式混乱。

综上所述，body选择器的优先级比div选择器高，如果需要覆盖body的样式，可以使用!important关键字。

一个月内的热帖推荐

Lv.1普通用户

62849 帖子	14 小组	291 积分

帖子

小组

291

积分

发帖	回复	分享

赞助商广告

本组热帖