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>