CSS(4)---三大特性(繼承性，層疊性，優先級)

時間 2019-11-13

原文原文鏈接

CSS(4)---三大特性(繼承性，層疊性，優先級)

CSS有三大特性分別是: 繼承性，層疊性，優先級。css

1、繼承性

概念 給父元素設置一些屬性，子元素也可使用，這個咱們就稱之爲繼承性。html

注意測試

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>

運行結果code

從這個例子中能夠看出子標籤p繼承了父類div的樣式。htm

2、層疊性

概念 層疊性就是CSS處理衝突的一種能力。層疊性只有在多個選擇器選中 同一個標籤, 而後又設置了相同的屬性, 纔會發生層疊性。blog

示例繼承

<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>

在相同優先級的的狀況下下面的樣式元素會將上面的層疊掉。it

3、CSS優先級

概念 當多個選擇器選中同一個標籤, 而且給同一個標籤設置相同的屬性時, 如何層疊就由優先級來肯定。class

優先級

!important>行內樣式>id選擇器>類選擇器>標籤選擇器>通配符>繼承

補充說明

一、繼承樣式的權重爲0。即在嵌套結構中，無論父元素樣式的權重多大，被子元素繼承時，他的權重都爲0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。
二、行內樣式優先。應用style屬性的元素，其行內樣式的權重很是高，能夠理解爲遠大於100。
三、權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具備最大的優先級，或者說排在最後的樣式優先級最大。
四、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>

4、經典測試題

這裏舉幾個測試題來鞏固下css優先級的知識。首先咱們要知道如何推斷標籤的最終樣式

1. 先找到影響文字的最裏面的盒子
2. 而後計算權重
3. 若是權重同樣，看層疊性

一、第一題

<!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>

答案 藍色。

二、第二題

<!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>

答案 藍色。

三、第三題

<!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>

答案 藍色。

四、第四題

<!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)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。