如何覆盖 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中文网其他相关文章！