CSS !important 規則

CSS !important 規則用於為屬性新增比普通屬性更高的優先順序。在本教程中，我們將學習 !important 規則以及如何在 CSS 中使用它。以下是 important 規則的語法。

語法

selector {
   property: value !important; 
}

什麼是 CSS !important 規則？

感嘆號 (!) 後面緊跟單詞 important（無空格）告訴瀏覽器優先考慮該屬性的值，高於所有其他宣告。
!important 規則將應用於屬性的特異性。
如果多個選擇器對一個屬性使用 important 關鍵字，則將考慮應用特異性高的選擇器。

CSS 中的特異性

CSS 中的特異性決定了當多個規則都可能應用時，哪些樣式將應用於元素。例如，內聯樣式具有最高優先順序，然後是 id 選擇器，然後是類選擇器，最後是元素選擇器。

/* Element selector Styles */
p {
  color: black;
}

/* Override the above style, Class have higher specificity */
p.special {
  color: blue;
}

/* Using !important to force an override */
p {
  color: red !important;
}

上述宣告將段落的文字顏色設定為紅色。元素選擇器的樣式被類選擇器覆蓋，然後又被 important 關鍵字覆蓋。

請記住，雖然 '!important' 在特定情況下非常方便，但最好只在真正需要時才使用它。
過於頻繁地使用 '!important' 會使您的程式碼難以管理和除錯。
最好依賴正確的 CSS 特異性和結構來避免過度使用 '!important'。

CSS !important 規則示例

以下示例演示了上面看到的 '!important' 的用法。

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
        /* Element Selector Styles */
        p {
            color: black;
            font-weight: bold;
        }

        /* Using !important to force a color override */
        p {
            color: red !important;
        }
    </style>
</head>

<body>
    <p> 
        This paragraph will be red. Because the style of element 
        selector is overridden by important keyword.
    </p>
</body>

</html>

CSS !important 和特異性

根據 CSS 的特異性，內聯樣式具有最高優先順序，然後是 id 選擇器，然後是類選擇器，最後是元素選擇器。這意味著元素選擇器編寫的樣式可以分別被類選擇器、id 選擇器和內聯樣式覆蓋。

以下示例使用多個選擇器將 color 屬性應用於段落，但具有 important 關鍵字的元素選擇器屬性應用於段落。

示例

<!DOCTYPE html> 
<html>

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

        .special {
            color: blue;
        }

        #unique {
            color: darkgreen;
        }

        p {
            color: red !important;
        }
    </style>
</head>
<body>
    <p id="unique" class="special">
        This paragraph will be red. Because element selector  
        will set color as black, class selector ".special" 
        will override this color to blue and id selector will 
        make it green. Finally important keyword is used at 
        last so this have more priority.
    </p>
</body>
</html>

覆蓋內聯樣式

內聯樣式在 CSS 中比任何選擇器都具有更高的優先順序。但是 important 關鍵字也可以覆蓋內聯 CSS。讓我們來看一個例子。

示例

<!DOCTYPE html> 
<html>

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

<body>
    <p style="color:red">
        Paragraph is black. Inline style is overridden by 
        important keyword
    </p>
</body>

</html>

多個 Important 關鍵字

當我們使用多個選擇器在 CSS 中為一個屬性應用多個 important 關鍵字時，將應用位於特異性高的選擇器中的屬性。讓我們來看一個例子。

示例

<!DOCTYPE html> 
<html>

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

        .special {
            color: blue !important;
        }

        #unique {
            color: darkgreen !important;
        }

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

<body>
    <p id="unique" class="special">
        This paragraph will be darkgreen. Since important keyword 
        is present at every selectors, high priority selector 
        will be chosen. In this case it is id "#unique"
    </p>
</body>

</html>

自定義屬性的 CSS !important

當您向自定義屬性新增 '!important' 時，這意味著此值非常重要。'!important' 標誌不會作為自定義屬性值的一部分傳遞給var() 函式。

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
        :root {
            --primary-color: blue !important;
            --primary-color: red ;
        }

        .box {
            background-color: var(--primary-color) ;
            width: 200px;
            height: 200px;
        }
        p {
            color: var(--primary-color);
        }
    </style>
</head>

<body>
    <div class="box"> </div>
    <p> Primary Color variable is Blue </p>
</body>

</html>

簡寫屬性上的 CSS !important

當您將 '!important' 與簡寫屬性一起使用時，它也將其重要性應用於其所有單個屬性。以下示例是相同的。此示例

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
        p {
            /* Applies to all */
            font: 15px Arial, sans-serif !important;
        }
    </style>
</head>

<body>
    <p style="font-size: 100px;">
        The font will set as per in CSS declaration. The font size of 
        100px will not be applied because important keyword is used 
        for shorthand property font. 
    </p>
</body>

</html>

列印頁面