css 選擇器優先順序

admin發表於2018-05-24
CSS

一.樣式優先順序:

在CSS 建立一章節介紹了使用CSS的方式，它們之間的優先順序關係如下:

[HTML] 純文字檢視 複製程式碼
外部樣式<內部樣式<內聯樣式

特別說明:如果外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  border:1px solid blue;
  border-style:dotted
}
</style>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
</body>
</html>

如果style.css檔案中有如下一段程式碼:

[CSS] 純文字檢視 複製程式碼
div {
  border:1px solid red;
}

那麼div的邊框會被設定成紅色，而不是藍色。

二.選擇器優先順序:

權重規則:

（1）.內聯樣式表的權值最高1000。

（2）.id選擇器的權值為100。

（3）.class 類選擇器的權值為10。

（4）.HTML 標籤選擇器的權值為1。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant p {
  /* 權值 = 100+1=101 */
  color:red;  /* 紅色 */
}
#ant .red em {
  /* 權值 = 100+10+1=111 */
  color:blue; /* 藍色 */
}
#ant p span em {
  /* 權值 = 100+1+1+1=103 */
  color:green;/*綠色*/
 }
</style>
</head>
<body>
  <div id="ant">
    <p class="red">
      螞蟻部落
      <span><em>螞蟻部落一</em></span>
    </p>
    <p>螞蟻部落二</p>
  </div>
</body>
</html>

三.CSS優先順序法則:

（1）.選擇器都有一個權值，權值越大越優先。

（2）.當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定。

（3）.創作者的規則高於瀏覽者：即網頁編寫者設定的CSS 樣式的優先權高於瀏覽器所設定的樣式。

（4）.繼承的CSS 樣式不如後來指定的CSS樣式。

（5）.在同一組屬性設定中標有!important規則的優先順序最大。

關於!important可以參閱CSS !important一章節。

相關文章