为什么我们应该使用!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中文网其他相关文章！