无码国内精品人妻少妇蜜桃视频,国产欲乱一级视频,国产午夜成一人免费看片

技術(shù)頻道 - html技術(shù)

CSS中id、類、標(biāo)簽的優(yōu)先級(jí)是怎樣的？

作者:admin 時(shí)間:2022-11-30 11:30:14 瀏覽:

CSS我們可以用標(biāo)簽、id、類來(lái)定義，然而，當(dāng)某一個(gè)元素同時(shí)擁有這三個(gè)CSS定義時(shí)，瀏覽器渲染時(shí)該選擇哪一個(gè)呢？這就涉及到它們的優(yōu)先級(jí)問題。本文將通過示例，來(lái)說(shuō)明這個(gè)問題。

示例

完整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">卡卡測(cè)速網(wǎng) WebKaka.com</div>
  
</body>
</html>

demo download

執(zhí)行結(jié)果

分析

div元素有兩個(gè)屬性：id="id"和class="class"。

CSS定義了三個(gè)樣式：div、#id和.class，它們?cè)O(shè)置了color屬性，div為red(紅色)，.class為blue(藍(lán)色)，#id為yellow(黃色)。

從執(zhí)行結(jié)果來(lái)看，文字顏色為黃色，所以可以斷定，#id的優(yōu)先級(jí)最高。

如果把div的id屬性去掉，HTML代碼改為：

<div class="class">卡卡測(cè)速網(wǎng) WebKaka.com</div>

那么結(jié)果又會(huì)怎樣呢？

執(zhí)行結(jié)果

結(jié)果文字顏色為藍(lán)色，所以可以斷定，.class的優(yōu)先級(jí)要比標(biāo)簽div高。

至此，我們可以清楚的知道了，CSS中id、類、標(biāo)簽的優(yōu)先級(jí)順序是：id > 類 > 標(biāo)簽。

使用 !important ，優(yōu)先級(jí)別最高

下面一個(gè)例子，使得div的CSS優(yōu)先級(jí)別最高，因?yàn)槭褂昧?!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">卡卡測(cè)速網(wǎng) WebKaka.com</div>
  
</body>
</html>