html優先順序和層疊性

遠飛夢發表於2018-11-10
HTML

所謂層疊性是指多種CSS樣式的疊加。例如，使用內嵌式CSS樣式表定義<p>標記字號大小為12畫素，鏈入式定義<p>標記顏色為紅色，那麼段落文字將顯示為12畫素紅色，即這兩種樣式產生了疊加。

本案例通過給同一個元素設定不同的顏色值來演示CSS層疊性的效果。 

  1. 分別給同一標記設定兩種不同的顏色，第一種使用標記選擇器設為藍色，第二種使用類選擇器設為紅色。
  2. 通過輸出的文字顏色，來演示CSS的層疊性和優先順序的效果。
 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3<html xmlns="http://www.w3.org/1999/xhtml">
 4<head>
 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6<title>CSS層疊性</title>
 7<style type="text/css">
 8div{color:#00F;}
 9.red{color:red;}
 10</style>
 11</head>
 12<body>
 13<div class="red">CSS層疊性演示，猜猜我是什麼顏色？</div>
 14</body>
 15</html>

 說明類選擇器比標記選擇器的優先順序更高。

1、如果多個選擇器作用於同一元素時，若多個選擇器定義的樣式不發生衝突，則元素將應用所有選擇器定義的樣式。

2、如果多個選擇器定義的樣式發生了衝突，則CSS按照選擇器的優先順序應用較高優先順序的樣式。

行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高。

1、行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高。

2、權重相同時(權重就是優先順序)，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先順序，或者說排在最後的樣式優先順序最大。

相關文章