CSS - 特效性

想象一下，如果我們使用不同的選擇器在 CSS 中多次宣告一個屬性會發生什麼。CSS 使用**特效性**順序來確定哪個選擇器具有最高的優先順序。

例如，如果使用類選擇器和 ID 選擇器在 HTML 元素上指定了兩個或多個 CSS 規則，則在具有最高特效性值的選擇器（在本例中為 ID 選擇器）中宣告的屬性將應用於該元素。

特效性層次結構

CSS 中的每個**選擇器**都具有一個特效性級別。以下是 CSS 選擇器的特效性順序。

**內聯樣式：** 使用 style 屬性為元素定義的樣式具有最高優先順序。

<h1 style="color: blue;"> Example </h1>

**ID 選擇器：** 在選擇器中，ID 選擇器具有最高優先順序。

<style>
   #mainDiv {
        color: blue;
    }
</style>

**類、屬性和偽類：** 這些是下一個優先順序。類選擇器以句點 (.) 為字首，屬性選擇器使用方括號 []，偽類以冒號(:) 為字首。

<style>
   .subDivs {
        color: blue;
    }
</style>

**元素和偽元素：** 這些具有最低的特效性。元素選擇器直接使用元素名稱，偽元素以雙冒號 (::) 為字首。

<style>
    div {
        color: blue;
    }
</style>

如何計算特效性？

要計算特效性值，您需要記住這些值。內聯樣式的特效性值為 1000。ID 選擇器的值為 100。對於類選擇器、屬性選擇器和偽類，特效性值為 10。最後，對於元素選擇器和偽元素，特效性值為 1。萬用字元選擇器沒有特效性值，為了比較的目的，我們可以認為其值為 0。

選擇器	特效性	計算
<div style="color: green"></div>	1000	1000
#uniqueId	100	100
.mainClass	10	10
div	1	1
div #uniqueId	101	100+1
div .mainClass	11	10+1
div .mainClass .navbar	21	10+10+1
div #uniqueId .navbar	111	100+10+1

特效性規則示例

下面的示例程式碼將說明 CSS 特效性。

具有最高特效性值的選擇器將生效

以下示例使用多個選擇器將 color 屬性應用於段落，在第一種情況下，ID 選擇器生效，在第二種情況下，內聯 CSS 生效。

<!DOCTYPE html> 
<html>

<head>
    <style>
        /*Multiple selectors for paragraph */
        p {
            color: black;
            font-weight: bold;
        }

        .special {
            color: blue;
        }

        #unique {
            color: darkgreen;
        }
    </style>
</head>

<body>
    <p id="unique" class="special">
        This paragraph will be darkgreen. Id selector wins!!!!
    </p>

    <p class="special">
        This paragraph will be blue. Class selector wins!!!!
    </p>

    <p class="special" style="color: darkblue;">
        This paragraph will be darkblue. Inline style wins!!!!
    </p>
</body>

</html>

特效性值相等，最新的規則獲勝

以下示例顯示，當兩個類選擇器目標相同的段落並嘗試對其應用相同的樣式時，最後定義的類將生效。

<!DOCTYPE html> 
<html>

<head>
    <style>
        p {
            color: black;
            font-weight: bold;
        }

        .special {
            color: blue;
        }

        .superSpecial{
            color: gold;
        }
    </style>
</head>

<body>
    <p class="special superSpecial">
        This paragraph is gold color. Class superSpecial wins!!!
    </p>
</body>

</html>

內部 CSS 樣式優先於外部樣式表

在 HTML 文件內使用 style 標籤定義的選擇器比外部匯入的樣式表具有更高的優先順序。

/*From imported external CSS file:*/
#uniqueID {
    color: red;
}

/*In HTML file:*/
<style>
    #uniqueID {
        color: yellow;
    }
</style>

元素將設定為黃色。

覆蓋特效性規則

以下示例演示，如果屬性標記為!important，則特效性順序將變得無關緊要。

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
        p {
            color: black;
            font-weight: bold;
        }

        .special {
            color: blue;
        }

        #unique {
            color: darkgreen;
        }

        p {
            color: darkred !important;
        }
    </style>
</head>

<body>
    <p id="unique" class="special">
        This paragraph is darkred. The !important keyword wins 
        over every other selector!!! 
    </p>

    <p class="special" style="color: green">
        This paragraph is darkred. The !important keyword wins 
        even over inline style!!! 
    </p>
</body>

</html>

列印頁面