選擇器的權重問題
important > 行間樣式 > id > class ==[屬性選擇器] > 標籤選擇器
記憶： (紋身一樣) (唯一性：身份證) (襯衫一樣) （class就是從標籤中挑出來個別的）
身份證和襯衫哪個丟了重要
| 類型 | 權重 |
|---|---|
| !important | Infinity |
| 行間樣式 | 1000 |
| id | 100 |
| class，屬性，僞類 | 10 |
| 標籤，僞元素 | 1 |
| 通配符 | 0 |
-
256進制
實操 IE7.0 版本（工程師測出來的） （65536 2的16次冪）越來越大 -
將所有的加到一起屬性權重加到一起進行比較大小
如果權重一樣則後面的覆蓋前面的（後來者居上）
例（看懂這個例子就差不多了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 10+10+1 = 21 */ /*在選擇demo1中是最大的*/
.wrapper .demo:first-child {
background-color: tomato;
}
/* 10+10 = 20 */
.wrapper .demo1 {
background-color: yellow;
}
/* 10+10 = 20 */
.wrapper .demo2 {
background-color: pink;
}
/* 100+10 = 110 */ /*選擇demo3中最大*/
#demo3 {
background-color: red;
}
/* 10+10 = 20 */ /*跟上面的權重一樣大所以覆蓋*/
.wrapper .demo {
width: 200px;
height: 200px;
background-color: aqua;
}
/* 10+0 = 10 */
.wrapper * {
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="demo1" class="demo demo1">demo1</div>
<div id="demo2" class="demo demo2">demo2</div>
<div id="demo3" class="demo demo3">demo3</div>
</div>
</body>
</html>
