##### 7 選擇器優先順序 所謂CSS優先順序，即是指CSS樣式在瀏覽器中被解析的先後順序。樣式表中的特殊性描述了不同規則的相對權重。 ``` /* !important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器預設屬性 1 內聯樣式表的權值最高 style ...
7 選擇器優先順序
所謂CSS優先順序，即是指CSS樣式在瀏覽器中被解析的先後順序。樣式表中的特殊性描述了不同規則的相對權重。
/*
!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器預設屬性
1 內聯樣式表的權值最高 style="" 1000；
2 統計選擇符中的ID屬性個數。 #id 100
3 統計選擇符中的CLASS屬性個數。 .class 10
4 統計選擇符中的HTML標簽名個數。 標簽名 1
按這些規則將數字元串逐位相加，就得到最終的權重，然後在比較取捨時按照從左到右的順序逐位比較。
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css選擇器的優先順序</title>
</head>
<style>
/*
行內選擇器:1000 id:100 class:10 標簽名:1
!important
*/
/*#i1{*/
/* color: red;*/
/*}*/
/*.c1{*/
/* color: gold;*/
/*}*/
/*div{*/
/* color: blue;*/
/*}*/
/*.c2 .c3 .c5{*/
/* color: red;*/
/*}*/
/* #i2{*/
/* color: rebeccapurple;*/
/* }*/
/*.c2 .c4 div{*/
/* color: green;*/
/*}*/
/*.c2 .c3 .c4 div{*/
/* color: lightcoral;*/
/*}*/
/*.c2 .c4 .c5{*/
/* color: lightskyblue;*/
/*}*/
/*.c5{*/
/* color: chartreuse!important;*/
/* }*/
</style>
<body>
<div id="i1" class="c1">alvin</div>
<div class="c2">
<div class="c3">
<div class="c4">
<div class="c5" id="i2" style="color: orange">item</div>
</div>
</div>
</div>
</body>
</html>
本文來自博客園，作者：生而自由愛而無畏，轉載請註明原文鏈接：https://www.cnblogs.com/zczhaod/p/17640505.html
