CSS如何使用!important規則？ (程式碼範例)
- 青灯夜游原創
- 2019-02-20 09:56:134212瀏覽
學習如何編碼網站的最佳方法之一是查看其他網站的原始程式碼，這種做法可以學習到一下好用的技巧。在查看原始碼的過程中，可能會在該程式碼中看“!important”；這意味著什麼？有什麼用？下面這篇文章就來帶大家了解一下!important規則，希望對大家有幫助。
!important規則是什麼？怎麼用？
!important是CSS的一個規則，用於提高指定CSS樣式規則的應用優先權；它被加到CSS值的末尾以賦予它更多權重。 【影片教學推薦：CSS教學】
在CSS中，樣式規則以級聯方式套用於元素。下面這個清單中越靠前的權重越小：
● 瀏覽器樣式：是網頁瀏覽器宣告的預設樣式。
● 使用者宣告的樣式：是使用者使用瀏覽器選項設定或透過開發人員偵錯工具修改的自訂樣式。
● 開發中宣告的樣式：是網站開發人員在CSS樣式表中宣告的樣式。
● 具有!important規則的開發者宣告樣式。
● 具有!important規則的使用者樣式。
!important規則的使用範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#container{
width: 450px;
height: 200px;
font-size: 25px;
}
#example{
color:red !important;
}
#container #example{
color:pink;
}
</style>
</head>
<body>
<div id="container">
<div id="example">PHP中文网！</div>
</div>
</body>
</html>效果圖：
範例說明：
在這個例子中，我們先有了一個包含！ important規則的樣式，定義一個元素（#example）的文字顏色為紅色（red）。然後我們有另一個樣式來使這個元素（#example）的文字顏色變成粉紅色（pink）。由於！ important聲明，因此元素（#example）的文字顏色現在是紅色而不是粉紅色。如果我們沒有使用！ important，那麼顏色將是粉紅色的。
什麼時候用!important規則？
除非絕對必要，否則不應使用!important規則；使用!important規則會打破了樣式表的自然級聯效果，使得程式碼難以維護。但是，在某些情況下你必須使用！ important：
1、在測試和偵錯網站時，!important規則是非常有用的。
如果我們的程式碼中存在一些CSS問題，並且希望確保應用特定的樣式，則可以使用!important規則在網站上臨時修復問題，直到找到更好的方法（可能需要一些時間） 。
2、輸出樣式表
!important規則也可用於輸出樣式表，以確保套用樣式而不被其他任何內容覆蓋。
結論
使用!important對於效能並沒有什麼負面影響；但是從可維護性角度考慮，除非絕對必要，應盡可能的避免使用!important規則，它應該只在特殊情況下使用。
以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！ ！ ！
以上是CSS如何使用!important規則？ (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章！