CSS中id、类、标签的优先级是怎样的？

技术频道 - html技术

CSS中id、类、标签的优先级是怎样的？

作者:admin 时间:2022-11-30 11:30:14 浏览:

CSS我们可以用标签、id、类来定义，然而，当某一个元素同时拥有这三个CSS定义时，浏览器渲染时该选择哪一个呢？这就涉及到它们的优先级问题。本文将通过示例，来说明这个问题。

示例

完整HTML

<html>
<head>
<title>div</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
div {
  color: red;
}

.class {
  color: blue;
}

#id {
  color: yellow; 
}

body {
  background: #333;
  display: grid;
  font-size: 50px;
  height: 100vh;
  place-items: center;
}
</style>
</head>

<body>

<div id="id" class="class">卡卡测速网 WebKaka.com</div>
  
</body>
</html>

demo download

执行结果

分析

div元素有两个属性：id="id"和class="class"。

CSS定义了三个样式：div、#id和.class，它们设置了color属性，div为red(红色)，.class为blue(蓝色)，#id为yellow(黄色)。

从执行结果来看，文字颜色为黄色，所以可以断定，#id的优先级最高。

如果把div的id属性去掉，HTML代码改为：

<div class="class">卡卡测速网 WebKaka.com</div>

那么结果又会怎样呢？

执行结果

结果文字颜色为蓝色，所以可以断定，.class的优先级要比标签div高。

至此，我们可以清楚的知道了，CSS中id、类、标签的优先级顺序是：id > 类 > 标签。

使用 !important ，优先级别最高

下面一个例子，使得div的CSS优先级别最高，因为使用了 !important 属性值。

完整HTML

<html>
<head>
<title>div</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
div {
  color: red !important;
}

.class {
  color: blue;
}

#id {
  color: yellow; 
}

body {
  background: #333;
  display: grid;
  font-size: 50px;
  height: 100vh;
  place-items: center;
}
</style>
</head>

<body>

<div id="id" class="class">卡卡测速网 WebKaka.com</div>
  
</body>
</html>