CSS(4)—三大特性(繼承性,層疊性,優先級)

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)

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※想知道網站建置網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計後台網頁設計

※不管是台北網頁設計公司台中網頁設計公司,全省皆有專員為您服務

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※帶您來看台北網站建置台北網頁設計,各種案例分享

※別再煩惱如何寫文案,掌握八大原則!

您可能也會喜歡…