css怎麼強制增加優先權

青灯夜游原創: 2022-09-06 17:49:504609瀏覽

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

css怎麼強制增加優先權

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

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

!important宣告

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

选择器{属性:值 !important;}

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

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

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

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

　●　開發中宣告的樣式：是網站開發人員在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怎麼強制增加優先權

#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規則，它應該只在特殊情況下使用。

以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！！！

特別說明：

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

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

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

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

（學習影片分享： web前端開發）

以上是css怎麼強制增加優先權的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript html5 css css3 class 选择器样式表

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css建立文字陰影適用於圖片麼下一篇：css建立文字陰影適用於圖片麼

看更多