css的特性有哪些？ css三個特性的分析（繼承、優先權和層疊）

css特性是什麼？ css的三個特性分別是：繼承、優先權、層疊。那麼。下面我們就來具體的來看看css中繼承、優先權和層疊三個特性的介紹。

繼承

#繼承即子類別元素繼承父類別的樣式，例如font-size,font-weight等f開頭的css樣式以及text-align,text-indent等t開頭的樣式以及我們常用的color。簡單的就不示範了，強調一下font-size這個東東(雖然也有繼承，但是標籤不同繼承的效果也不一樣)，比如下面的程式碼：

nbsp;html>
    <meta>
    <title>Document</title>
    <style>
        .fonts {
            font-size: 20px;
        }
    </style>
    <p>
        </p><p>我的字体大小为20px</p>
        <h1 id="我的字体大小为-px">我的字体大小为40px</h1>
    

運行結果：

我給div和h1標籤的父元素p設一個font-size為20px，p沒有問題，繼承了p的20px，但h1卻變成了40px，我們從下面的JS程式碼可以取得。

為什麼h1會是40px呢？因為h1的預設樣式為2em（32px）,如下圖

，

並且h1預設的font-size為200%，因為p設了20px，所以透過繼承h1的最終font-size為20*2=40px，要使h1的標籤字體大小也等於父標籤p，只需設定h1 {font-size:100%;},如下圖所示：

nbsp;html>
    <meta>
    <title>Document</title>
    <style>
        .fonts {
            font-size: 20px;
        }
        h1 {
            font-size: 100%;
        }
    </style>
    <p>
        </p><p>我的字体大小为20px</p>
        <h1 id="我的字体大小为-px">我的字体大小为20px</h1>
    

執行結果：

#css優先權

!important > 行內樣式>ID選擇器> 類別選擇器> 標籤>通配符> 繼承>瀏覽器預設屬性

#有點複雜。那我們透過以下幾個例子來證明吧。

方法－先看選擇器是否命中對應的標籤，命中後再根據權重來進行判斷，權重的意思是數標籤的數量，透過比較ID 類別標籤這三種選擇器的數量來決定誰的優先順序最高。當數量相同時，透過層疊（後者覆蓋前者）來決定。

最後顯示綠色，因為雖然!important優先權最高，但沒有繼承性，li的顏色繼承自ul.

答案是yellow，因為三者都可以命中元素，所以透過權重判斷，第一個沒有ID選擇器PASS掉，第二個和第三個一樣，透過層疊（第三覆蓋第二）決定顏色。

html是一個嵌套了12個p的複雜盒子，最裡面的p有me這個類，判斷方法：都可以命中元素，所以透過權重，類選擇器>元素選擇器，所以選擇blue.

都可以命中對應元素，權重第一個大於第二個（比較標籤選擇器數量），顯示blue.

先透過是否命中對應元素排除第四和第五個樣式，然後根據權重比較一二三－第一個： 兩個ID ;第二個：一個ID一個類別;第三個：兩個類別。所以根據權重ID>類，最後顯示blue.

答案是blue，第二個沒有命中PASS掉，第一個和第三個比較權重，由於第一個沒有類，所以答案是blue。

最後總結優先權、層疊與權重的關係－

層疊是css的特性，如果兩個相同的屬性作用於相同標籤，它們會發生層疊。如果多個複合選擇器，同時作用於我們的相同標籤，優先順序就不好計算了，就要計算權重，透過比較權重，來先出優先順序最高的選擇器。

如何計算權重：

（數標籤的數量）先數id,如果id相等再數類別如果id不相等id多的選擇器權重高，權重越高，優先權越高。若id選擇器數量相同，再數類別選擇器，最後數標籤。

注意：比較權重的時候一定要注意：我們的選擇器一定要命中對應的標籤才可能讓標籤擁有對應的屬性。

相關文章推薦：

#Css的三大機制（特性）：特殊性、繼承、層疊詳解_html/ css_WEB-ITnose

#詳CSS繼承特性與層疊特性

#

以上是css的特性有哪些？ css三個特性的分析（繼承、優先權和層疊）的詳細內容。更多資訊請關注PHP中文網其他相關文章！