編碼的世界 / 優質文選 / 生涯

CSS 中樣式覆蓋優先順序

2022年3月20日
-   

我們在日常開發，總會遇到樣式覆蓋問題。有時候修改後的樣式，並沒有根據自己的意願顯示出來。這裏就可能跟樣式覆蓋優先順序有關。
1、首先，層疊優先級是 內聯樣式 > 內部樣式表 > 外部樣式表 下面以具體實例說明 代碼: test.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>層疊優先級</title>
 <link rel="stylesheet" href="test.css">





 <style type="text/css">
 p {
 color: green;
 font-size: 14px;
 }
 </style>
</head>
<body>
 <p style="color: red">這是一段文字</p>
</body>
</html>

test.css文件
p {
 color: blue;
 font-size: 18px;
 background-color: yellow;
}

運行結果 這個結果很容易看到，外部樣式表樣式 的字體顏色和大小被內部樣式表 的字體顏色和大小覆蓋了， 內部樣式表 的字體顏色被 內聯樣式 覆蓋掉了。
2、選擇器優先級
  • id選擇器 > class選擇器 > 標簽選擇器 code:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>層疊優先級</title>
 <link rel="stylesheet" href="test.css">
</head>
<body>
 <p class="pct" id="pit">





 id選擇器 > class選擇器 > 標簽選擇器
 </p>
</body>
</html>

p {
 color: blue;
 font-size: 24px;
 background-color: yellow;
}
.pct {
 color: green;
 background-color: pink;
}
#pit {
 color: red;
}


  • .class .class > 父級標簽 .class > 自身標簽.class > .class

熱門文章