html優先順序和層疊性
阿新 • • 發佈:2018-12-05
所謂層疊性是指多種CSS樣式的疊加。例如,使用內嵌式CSS樣式表定義<p>標記字號大小為12畫素,鏈入式定義<p>標記顏色為紅色,那麼段落文字將顯示為12畫素紅色,即這兩種樣式產生了疊加。
本案例通過給同一個元素設定不同的顏色值來演示CSS層疊性的效果。
- 分別給同一標記設定兩種不同的顏色,第一種使用標記選擇器設為藍色,第二種使用類選擇器設為紅色。
- 通過輸出的文字顏色,來演示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遵循就近原則。也就是說靠近元素的樣式具有最大的優先順序,或者說排在最後的樣式優先順序最大。