CSS中!important規則的使用方法

發布時間：2020-06-15 10:53:11

來源：億速云

閱讀：129

作者：Leah

這期內容當中小編將會給大家帶來有關CSS中!important規則的使用方法，以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

!important規則是什么？怎么用？

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

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

●　瀏覽器樣式：是Web瀏覽器聲明的默認樣式。

●　用戶聲明的樣式：是用戶使用瀏覽器選項設置或通過開發人員調試工具修改的自定義樣式。

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

●　具有!important規則的開發者聲明樣式。

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

!important規則的使用示例：

億速云(php.cn)

#container{

width: 450px;

height: 200px;

font-size: 25px;

}

#example{

color:red !important;

}

#container #example{

color:pink;

}

億速云！

效果圖：

示例說明：

在這個例子中，我們首先有了一個包含！important規則的樣式，定義一個元素(#example)的文本顏色為紅色(red)。然后我們有有另一個樣式來使這個元素(#example)的文本顏色變為粉色(pink)。由于！important聲明，因此元素(#example)的文本顏色現在是紅色而不是粉色。如果我們沒有使用！important，那么顏色將是粉色的。

什么時候用!important規則？

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

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

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

2、輸出樣式表

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

結論

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

以上便是CSS中!important規則的使用方法，雖然從篇幅上看很復雜，但是示例代碼非常詳細且容易理解，如果想了解更多相關內容，請關注億速云行業資訊。

總結

以上是生活随笔為你收集整理的css规则可以放在云上,CSS中!important规则的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。