css怎麼強制增加優先順序

在css中，可以通過設定「!important」宣告來強制增加優先順序；該宣告用於提高指定CSS樣式規則的應用優先權，會被新增到CSS樣式值的末尾以賦予該樣式更多權重，語法「選擇器{屬性:值 !important;}」。使用「!important」規則會打破樣式表的自然級聯效果，使得程式碼難以維護；因此除非絕對必要，應儘可能避免使用!important規則，它應只在特殊情況下使用。

前端（vue）入門到精通課程：進入學習

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中，可以通過設定「!important」宣告來強制增加優先順序。

!important宣告

!important用於提高指定CSS樣式規則的應用優先權；它被新增到CSS值的末尾以賦予它更多權重。

選擇器{屬性:值 !important;}

注意：屬性：值 !important 屬性值用空格隔開即可。

在CSS中，樣式規則以級聯方式應用於元素。下面這個列表中越靠前的權重越小：

　●　瀏覽器樣式：是Web瀏覽器宣告的預設樣式。

　●　使用者宣告的樣式：是使用者使用瀏覽器選項設定或通過開發人員偵錯工具修改的自定義樣式。

　●　開發中宣告的樣式：是網站開發人員在CSS樣式表中宣告的樣式。

　●　具有!important規則的開發者宣告樣式。

　●　具有!important規則的使用者樣式。

!important為開發者提供了一個增加樣式權重的方法，比直接在元素的 style 屬性中設定 CSS 宣告還要高，一般用在 CSS 覆蓋 JavaScript設定上。

範例：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>測試!Important</title>
</head>
<style type="text/css">
    #Box div
    {
        color: red;
    }
    .important_false
    {
        color: blue;
    }
    .important_true
    {
        color: blue !important;
    }
</style>
<body>
    <div id="Box">
        <div class="important_false">
            這一行末使用important</div>
        <div class="important_true">
            這一行使用了important</div>
    </div>
</body>
</html>

效果圖：

CSS程式碼第一行設定了box裡面所有div中字型色為紅色，第二行和第三行都用class重新定義了自身div的字型色為藍色，

不同的是，第二行未使用!important，而第三行使用了!

總結：

第一行字型顏色是紅色，可以證明，css樣式設定中，id的優先順序大於class，這行字還是紅色。

第二行字型顏色是藍色，可以證明，!important的優先順序最高，important_true的css樣式生效，這行字變為了藍色！

什麼時候用!important規則？

除非絕對必要，否則不應使用!important規則；使用!important規則會打破了樣式表的自然級聯效果，使得程式碼難以維護。但是，在某些情況下你必須使用！important：

1、在測試和偵錯網站時，!important規則是非常有用的。

如果我們的程式碼中存在一些CSS問題，並且希望確保應用特定的樣式，則可以使用!important規則在網站上臨時修復問題，直到找到更好的方法（可能需要一些時間）。

2、輸出樣式表

!important規則也可用於輸出樣式表，以確保應用樣式而不被其他任何內容覆蓋。

結論

使用!important對於效能並沒有什麼負面影響；但是從可維護性角度考慮，除非絕對必要，應儘可能的避免使用!important規則，它應該只在特殊情況下使用。

以上就是本篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以關注TW511.COM相關教學欄目！！！

特別說明：

!important在IE6中是不被識別的，例：

.testClass{ 
    color:blue !important; 
    color:red;
}

這種寫法在IE6下是識別不到的，.testCalss最後顯示為紅色，但也可以通過更改下寫法讓IE6識別到!important

.testClass{ 
    color:blue !important; 
} 
.testClass{ 
    color:red; 
}

（學習視訊分享：）

以上就是css怎麼強制增加優先順序的詳細內容，更多請關注TW511.COM其它相關文章！