為什麼我們應該使用!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中文網其他相關文章！