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>
執行結果
分析
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>
執行結果
分析
文字顏色為紅色,故使用的是CSS中div
的定義。
CSS中div
的屬性使用了red !important;
,這使得div
的CSS定義一下子把優先權提升到了最高的級別,所以就出現這樣的執行結果。
總結
本文通過多個示例,說明了CSS中id、類、標簽的優先級問題,但是我們可以使用一些手段把某個CSS的定義的優先級提高。
相關文章
- 站長推薦