首頁 >web前端 >css教學 >為什麼我們應該使用!important?

為什麼我們應該使用!important?

王林
王林轉載
2023-08-23 21:45:021115瀏覽

為什麼我們應該使用!important?

在 CSS 中,「!important」是我們與 CSS 屬性值一起使用的關鍵字。當我們將「!important」與 CSS 屬性值一起使用時,瀏覽器會更重視該屬性值,而不是同一元素上的其他屬性值。

這裡有一些用例,我們需要將「!important」與 CSS 屬性值一起使用。

  • 在內容管理系統(CMS)中,我們無法編輯網頁的CSS。因此,如果我們在網頁上新增額外的 CSS,它就無法應用於特定元素,但如果我們在 CSS 中使用“!important”,我們就可以覆寫特定 CSS 屬性的初始值。

  • 當我們在Web框架中使用任何UI函式庫(例如ReactJS,Svelte等)時,我們有時無法編輯UI元件的CSS。在這種情況下,我們可以使用 CSS 屬性中的 ‘!important’ 來覆寫它們的值。

  • 即時應用程式包含大型 CSS 檔案。有時,CSS 由於未知的覆蓋而不會影響元素。在這種情況下,我們可以使用“!important”來覆寫特定元素上特定屬性的所有值。

# ###句法###

使用者可以依照下列語法將「!important」與 CSS 屬性值一起使用。

雷雷

在上面的語法中,CSS-property 可以是任何 CSS 屬性,例如 margin、padding、padding-left、font-size 等,value 是 CSS 屬性的值。

###例###

在下面的範例中,我們建立了三個類別名為「black」、「grey」和「red」的 div 元素。在 CSS 中,我們根據類別名稱為 div 元素指定了背景顏色。

此外,我們也使用「!important」關鍵字將「background-color:pink」CSS屬性套用到所有div元素。在輸出中,使用者可以觀察到所有 div 的背景顏色都變成粉紅色,因為我們使用了「!important」。

雷雷 ###例###

在下面的範例中,我們建立了兩個不同的段落。一個段落包含「one」類別名,另一段包含「two」作為類別名稱。我們已經對所有

應用了一些 CSS元素.

要覆寫類別名稱「one」元素的 CSS,我們使用「!important」關鍵字來覆寫「

」元素上套用的樣式。在輸出中,使用者可以觀察到第一段有不同的樣式。

雷雷 ###例###

我們將透過下面給出的範例學習使用另一個「!important」來覆蓋「!important」。我們使用「initial」、「middle」和「final」類別名稱創建了三個 div 元素。

我們使用了‘!important’和background-color CSS屬性,我們將其應用於div元素。所以,最初,所有 div 元素的背景都是淺綠色的。之後,我們再次將‘!important’與background-color CSS屬性一起使用,同時將其應用於類別名為‘middle’和‘final’的元素。

在輸出中,使用者可以觀察到藍色和淺鮭魚色覆蓋了「水綠色」。

雷雷

結論

使用者學會了在 CSS 中使用「!important」。基本上,我們應該避免過度使用「!important」;否則,解決大量“!important”問題可能會讓任何人頭疼,因為它會覆蓋元素的 CSS。

但是,使用者在更新任何圖書館內容管理系統或 UI 元件的 CSS 時可以使用「!important」。

以上是為什麼我們應該使用!important?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除