CSS權重優先級的認知


從CSS代碼存放位置看權重優先級:內嵌樣式 > 內部樣式表 > 外聯樣式表。其實這個基本可以忽視之,大部分情況下CSS代碼都是使用外聯樣式表。

從樣式選擇器看權重優先級:important > 內嵌樣式 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符。

  • important的權重為1,0,0,0
  • ID的權重為0,1,0,0
  • 類的權重為0,0,1,0
  • 標簽的權重為0,0,0,1
  • 偽類的權重為0,0,1,0
  • 屬性的權重為0,0,1,0
  • 偽對象的權重為0,0,0,1
  • 通配符的權重為0,0,0,0

 

實例:

<html>
<head>
<style type="text/css">
#left{color:black!important;}         /*1,1,0,0*/
#container #left{color:red;}         /*0,2,0,0*/
#left{color:green!important;}       /*1,1,0,0*/
.container #left{color:blue;}      /*0,1,1,0*/
</style>
</head>

<body>
<div class="container" id="container">
    <span id="left">這到底是什么顏色啊?</span>
</div>
</body>
</html>

 

2個#left的權重都是1,1,0,0 這個時候就采用最后定義原則,所以最后輸出的姿態是綠色的。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM