如何覆寫 CSS 中的內嵌 `!important` 樣式？

覆蓋內聯!important 樣式

在CSS 中，!important 標誌用於指示樣式屬性應優先於所有其他樣式屬性聲明。但是，您可能會遇到需要使用樣式表中的 !important 覆蓋內聯樣式的情況。

考慮以下HTML 元素：

<code class="html"><div style="display: none !important;"></div></code>

如果您希望使此元素可見，您不能簡單地在樣式表中使用另一個!important 規則，因為它不會覆蓋內聯樣式。

解決方案

要使用 !important 覆蓋內聯樣式，您必須在更具體的選擇器上使用 !important 標誌。在這種情況下，您可以使用以下的類別選擇器：

<code class="css">div.visible {
  display: block !important;
}</code>

此規則將以任何具有可見類別的div 元素為目標，並覆蓋內聯顯示：無樣式，使元素可見。

<code class="html"><div style="display: none !important;" class="visible"></div></code>

請注意，只有當您在樣式表中使用的選擇器比內聯選擇器更具體時，此技術才有效。此外，避免過度使用 !important 通常是一個好的做法，因為它會使您的 CSS 程式碼更難維護。

以上是如何覆寫 CSS 中的內嵌 `!important` 樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！