如何在CSS中使用！重要的财产

在造型的网站时，您可以将多个CSS声明应用于同一元素。在这种情况下，浏览器确定哪些声明与元素最相关，并应用这些声明。

这种相关性 - 或，特异性 - 基于匹配规则CSS选择器。CSS选择器是修饰符，告诉浏览器的浏览器与CSS的样式。有不同的选择器类型，每个选择类型都有自己的语法和特异性级别。

但是，规则有一个例外CSS特异性。它被称为！重要规则。让我们来简要回顾具体规则，然后仔细看看下面的重要规则。我们会覆盖：

• css中的重要手段
• 如何使用！重要规则
  • 为什么！重要规则不起作用

• 如何覆盖！重要规则

回顾CSS特异性

以下选择器类型从最高的特异性到最低点

1. ID选择器：这些基于其ID属性选择元素并具有语法#idname.。
2. 类选择器，属性选择器和伪类选择器：
   一种）类选择器选择A中的所有元素CSS类并有语法。班级名称。
   
   b）属性选择器选择具有给定属性并具有语法的所有元素[attr]。
   
   C）伪类选择器仅在特殊状态下选择元素，如访问或悬停，并且具有语法选择器：伪课。
3. 类型选择器：这些选择具有给定节点名称的所有HTML元素并具有语法元素。

笔记：通用选择器（*）对特异性没有影响。

如果具有等于特异性的多个声明，如类选择器和属性选择器，则在同一元素上进行，然后是最后一个声明（即，稍后在样式表中列出的声明）将应用于元素。

在编码网站的HTML和CSS时要记住的其他主要规则是！重要规则。这是上述所有特定规则的例外。让我们仔细看看它的意思下面。

虽然在结合财产价值时比在许多特异性规则之后更容易，但使用！重要属性被认为是一个糟糕的做法。那是因为它打破了样式表的自然级联，这使得维护和调试您的网站更加困难。

但是，有特定用例使用！重要属性是理想的。一个这样的用例是定义实用程序类，如按钮类。

假设您希望按钮类针对的任何元素看起来像相同的按钮：橙色背景，白色字体颜色，纯黑色边框。没有！重要属性，您可以使用以下代码使链接看起来像一个按钮。

这是HTML：

点击me 

这是CSS：

。按钮 {
背景：＃ff7a59;
颜色：#ffffff;
填充：5px;
字体大小：50px;
边界半径：5px;
边框：2px固体黑色;
}

这是结果：

看笔锚点元素与按钮类由克里斯蒂娜百科（@hubspot.） 上Codepen.。

现在让我们说你继续构建你的网页。在某些时候，您将使用ID“内容”添加一个新部分给您的HTML。本节包含与按钮类的另一个链接。您还向CSS添加了另一个规则，定义了使用ID名称“内容”的所有元素，以具有稳固的蓝色边框。您可以使用以下代码。

这是HTML：

点击me 

文本文本blah 单击me  

这是CSS：

。按钮 {
背景：＃ff7a59;
颜色：#ffffff;
填充：5px;
字体大小：50px;
边界半径：5px;
边框：2px固体黑色;
}
#content a {
边框：4px实体＃00a4bd;
}

这是结果：

看笔xxgqykq.由克里斯蒂娜百科（@hubspot.） 上Codepen.。

因为ID选择器具有比类选择器更高的特异性，所以选择器的CSS样式#Content A.优先于选择器的CSS样式。按钮。这就是第二种元素的原因是稳定的蓝色边框，而不是纯黑色的。

像这样的场景是不可避免的，无论您是从头开始建造一个网站还是使用框架Bootstrap CSS.。您正在使用的代码量越大，它越难以跟踪CSS选择器的特殊性。

您可以通过使用！重要的财产避免您网站上上述方案的风格不一致。让我们来看看下面究竟使用这个属性。

如何在CSS中使用重要

使用CSS中的重要规则很容易。你只需要在分号之前添加！在线结束时要添加。所以语法是：

元素 {
风格财产！重要;
}

让我们来看看CSS如何在添加！重要规则时更改上面的示例。

CSS重要的例子

对于此示例，您希望按钮类针对的任何元素看起来像相同的按钮：橙色背景，白色字体颜色，纯黑色边框。

问题是您有一些由按钮类和ID名称定义的锚元素（或链接）。在您的CSS中，具有此ID名称的元素将具有纯蓝色边框。由于ID选择器更具特定于类别选择器，因此这些锚元件将像橙色背景和白色字体颜色一样样式样式，但它们将具有纯蓝色边框而不是纯黑色。

您不希望在您的网站上进行任何不一致的样式。因此，在指定按钮类的CSS时，您将使用！重要规则。

HTML保持不变：

点击me 

文本文本blah 单击me  

CSS成为：

。按钮 {
背景：＃ff7a59！重要;
颜色：#ffffff！重要;
填充：5px！重要;
字体大小：50px！重要;
边界半径：5px！重要;
边框：2PX纯黑！重要;
}
#content a {
边框：4px点缀＃00a4bd;
}

结果是：

看笔CSS重要的例子由克里斯蒂娜百科（@hubspot.） 上Codepen.。

您会注意到，由于！重要规则，您将如何看起来相同。

CSS重要不起作用

让我们说你在CSS中使用！重要规则，但元素没有风格，因为你想要它们。只有几个原因！重要规则不起作用。

首先，如果在用户的样式表中使用，则重要规则在作者的样式表中不起作用。作者样式表由网页的作者提供。用户样式表由浏览器的用户提供。

默认情况下，作者样式表中的CSS规则覆盖用户样式表中的规则。但是，在作者和用户之间创建权力的平衡，！用户样式表中的重要规则将覆盖！作者样式表中的重要规则。此CSS功能专为无障碍。需要更大的字体，特定颜色组合或由于vision相关的残疾的其他要求的用户可以维护对网页的呈现的控制。

您也可能添加！对于使用其他CSS规则集的CSS规则集重要的CSS规则集。稍后在样式表中稍后稍后覆盖。您可能会在事故发生这种情况，这将解释为什么重要的不起作用 - 或者您可能希望故意这样做。

让我们说你改变你的网站的配色方案或者您不希望使用按钮类的所有元素看起来相同。无论是什么原因，您可能想要覆盖CSS中的重要规则。让我们来看看以下。

为什么这两种方法有效？因为特异性规则。当使用的两个声明应用于同一元素时，将应用具有更大特异性或定义的声明的声明。您可能会从介绍中记住这些规则，但是要了解它们适用于使用！重要规则以及不使用规则的声明的声明。

与另一个人的CSS中的CSS中的重要属性而不是覆盖！重要的属性，非常适合重写规则并避免完全使用该属性。但有时这是不可能的。

例如，拍摄用户样式表。使用自定义用户样式表，读者可以根据自己的意愿覆盖网站的样式。例如，读者可能会增加字体大小或者更改页面上的排版的颜色，使其能够更好地查看内容。

由于用户定义的样式表将覆盖作者样式表，无论特定程度如何，读者都可能能够添加CSS规则而无需！重要标记。但是，如果作者样式表正在使用！重要规则来定义其字体大小或颜色，那么在用户样式表中将必需。

让我们从上面使用相同的按钮示例。说，我的网站已经拥有！应用于按钮类的重要规则。但现在我确实想要用ID名称“内容”来拥有纯蓝色边框的所有元素。

我应该简单地重写代码，从我的CSS中删除所有！重要标签。但是，让我们说我是一个时间嘎嘎嘎嘎，寻找快速修复。然后我可以简单地将！重要标记添加到CSS ID选择器。然后两个声明都将使用！重要属性，因为ID选择器具有更高的特异性然后类选择器，所以内容部分中的元素将具有稳定的蓝色边框。

HTML保持不变：

点击me 

文本文本blah 单击me  

CSS成为：

。按钮 {
背景：＃ff7a59！重要;
颜色：#ffffff！重要;
填充：5px！重要;
字体大小：50px！重要;
边界半径：5px！重要;
边框：2PX纯黑！重要;
}
#content a {
边框：4px点缀＃00a4bd！重要;
}

结果是：

看笔覆盖的例子1！重要规则由克里斯蒂娜百科（@hubspot.） 上Codepen.。

！重要规则基本上互相取消。因此，由于ID选择器具有比类选择器更高的特异性，因此第二个元素具有纯蓝色边框，而不是纯黑色边界。

您也可以通过使用相同特性的CSS选择器来覆盖！重要规则，但稍后将其放在样式表中。

假设我想要我网站上的所有按钮都有一个稳定的蓝色边框。同样，我应该简单地重写代码，但我可以使用！重要标签快速修复。使用相同的类选择器.btn具有纯蓝色边框的新规则和一个！重要标记，我可以简单地在样式表中的现有规则后添加它。因为它稍后，它具有更高的特异性，并且将应用于与.btn类的元素。

HTML保持不变：

点击me 

文本文本blah 单击me  

CSS成为：

。按钮 {
背景：＃ff7a59！重要;
颜色：#ffffff！重要;
填充：5px！重要;
字体大小：50px！重要;
边界半径：5px！重要;
边框：2PX纯黑！重要;
}
。按钮 {
边框：4px实体＃00a4bd！重要;
}

这是结果：

看笔覆盖的例子2！重要规则由克里斯蒂娜百科（@hubspot.） 上Codepen.。

在CSS中使用！重要属性

虽然！重要声明应该很少用于代码中，但仍然需要了解此属性是什么以及如何使用它。也许你需要在用户样式表中使用！重要规则。也许你会接管一个包含规则实例的网站。无论是什么原因，都熟悉！重要属性是学习HTML和CSS的有用步骤。

编者注：这篇文章最初发表于2020年5月，并已更新全面。