CSS(4)—三大特性(繼承性，層疊性，優先順序)
- 2019 年 11 月 13 日
- 筆記
CSS(4)—三大特性(繼承性，層疊性，優先順序)
CSS有三大特性分別是: 繼承性，層疊性，優先順序。
一、繼承性
概念 給父元素設置一些屬性，子元素也可以使用，這個我們就稱之為繼承性。
注意
1.並不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承 2.在CSS的繼承中不僅僅是兒子可以繼承, 只要是後代都可以繼承 3.繼承性中的特殊性 3.1 a標籤的文字顏色和下劃線是不能繼承的 3.2 h標籤的文字大小是不能繼承的示例
<!-- 樣式部分 --> <style type="text/css"> .father { width: 300px; /*設置寬度*/ font-size: 20px; /* 設置字體*/ text-align: right; /* 字體右對齊*/ background-color: green; /*背景顏色綠色*/ color:red; /*字體顏色紅色*/ } </style> <!-- html部分 --> <body> <div class="father">father標籤 <p>father子標籤 p</p> </div> </body>運行結果
從這個例子中可以看出子標籤p繼承了父類div的樣式。
二、層疊性
概念 層疊性就是CSS處理衝突的一種能力。層疊性只有在多個選擇器選中 同一個標籤, 然後又設置了相同的屬性, 才會發生層疊性。
示例
<html> <head> <title>CSS三大特性之層疊性</title> <style> p { color: red; } p { color: blue; } </style> </head> <body> <p style="color: black">我是段落</p> <!-- 最終顯示black 就近原則 black > blue > red --> </body> </html>在相同優先順序的的情況下 下面的樣式元素會將上面的層疊掉。
三、CSS優先順序
概念 當多個選擇器選中同一個標籤, 並且給同一個標籤設置相同的屬性時, 如何層疊就由優先順序來確定。
優先順序
!important>行內樣式>id選擇器>類選擇器>標籤選擇器>通配符>繼承 補充說明
1、繼承樣式的權重為0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。 2、行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大於100。 3、權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先順序，或者說排在最後的樣式優先順序最大。 4、CSS定義了一個!important命令，該命令被賦予最大的優先順序。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先順序。關於CSS權重，有一套計算公式來去計算，用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進位，級別之間不可超越。
部分權重是可以疊加的。比如的例子：
div ul li ------> 0,0,0,3 a:hover -----—> 0,0,1,1 .son ul li ------> 0,0,1,2 .son a ------> 0,0,1,1 #son p ------> 0,1,0,1注意
對於並集選擇器來說不是權重的加和，因為理論上它還是獨立的，它只相當於將多個選擇器的相同內容歸於一個並集選擇器中，理論上每一個選擇器還是獨立的。
示例
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div,p { color: green; /*這裡不能是0,0,0,2 而是兩個0,0,0,1*/ } p { color: red; /*對於p標籤最終會顯示紅色 0,0,0,1 (因為和上面優先順序一樣，所以下面會覆蓋上面樣式)*/ } </style> </head> <body> <p>標籤什麼顏色</p> </body> </html>四、經典測試題
這裡舉幾個測試題來鞏固下css優先順序的知識。首先我們要知道如何推斷標籤的最終樣式
1. 先找到影響文字的最裡面的盒子 2. 然後計算權重 3. 如果權重一樣，看層疊性1、第一題
<!DOCTYPE> <html> <head> <title>第2題</title> <style type="text/css"> #father{ color:red; /* 繼承的權重為 0,0,0,0 */ } p{ color:blue; /* 權重 0,0,0,1 */ } </style> </head> <body> <div id="father"> <p>試問這行字體是什麼顏色的？</p> </div> </body> </html>答案 藍色。
2、第二題
<!DOCTYPE> <html> <head> <title>第1題</title> <style type="text/css"> #father #son{ /*權重: 0,2,0,0 */ color:blue; } #father p.c2{ /* 權重: 0,1,1,1 */ color:black; } div.c1 p.c2{ /* 權重 0,0,2,2 */ color:red; } #father{ color:green !important; /* 繼承的權重為 0,0,0,0 */ } </style> </head> <body> <div id="father" class="c1"> <p id="son" class="c2"> 試問這行字體是什麼顏色的？ </p> </div> </body> </html>答案 藍色。
3、第三題
<!DOCTYPE> <html> <head> <title>Document</title> <style type="text/css"> div div div div div div div div div div div div{ /* 權重 0,0,0,11 (最後一位數再怎麼相加都不會向前進一位) */ color:red; } .me{ color:blue; /* 權重 0,0,1,0 */ } </style> </head> <body> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div class="me">試問這行文字是什麼顏色的</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>答案 藍色。
4、第四題
<!DOCTYPE> <html> <head> <title>第四題</title> <style type="text/css"> .c1 .c2 div{ /* 權重 0,0,2,1 */ color: blue; } div #box3{ /* 權重 0,1,0,1 */ color:green; } #box1 div{ /* 權重 0,1,0,1 */ color:yellow; } </style> </head> <body> <div id="box1" class="c1"> <div id="box2" class="c2"> <div id="box3" class="c3"> 文字顯示什麼顏色 </div> </div> </div> </body> </html>答案 黃色 （如果權重一樣，看層疊性）
你如果願意有所作為，就必須有始有終。(6)
