
都知道CSS選擇器有權重優先級,權重大的優先展示。
但部分人可能不清楚,權重值也是可以疊加計算的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>element</title>
<style>
.classArea{
width: 100px;
height: 100px;
background: red;
}
#idArea{
background: yellow;
}
div#idArea{
background: pink;
}
</style>
</head>
<body>
<div class="classArea" id="idArea"></div>
</body>
</html>

分析:
view{ // 權重為 1
color: blue
}
.ele{ // 權重為 10
color: red
}
#ele{ // 權重為 100
color: pink
}
view#ele{ // 權重為 1 + 100 = 101,優先級最高,元素顏色為orange
color: orange
}
view.ele{ // 權重為 1 + 10 = 11
color: green
}
.
