都知道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 }
.