如何在CSS中使用!重要属性

在设计网站样式时，可以对同一个元素应用多个CSS声明。在这种情况下，浏览器决定哪些声明与元素最相关，并应用它们。

这种相关性或特殊性是基于的匹配规则CSS选择器．CSS选择器是一种修饰符，它告诉浏览器哪些元素需要使用CSS样式。有不同的选择器类型，每种类型都有自己的语法和特异性级别。

下面的选择器类型从特异性最高到最低:

1. ID选择器:它们根据元素的ID属性选择元素并具有语法# idname．
2. 类选择器、属性选择器和伪类选择器:
   一)类选择器选择类中的所有元素CSS类要有语法. class名称．
   
   b)属性选择器选择具有给定属性和语法的所有元素[attr]．
   
   c)伪类选择器只在特定状态下(如已访问或悬停)选择元素，并具有语法选择器:伪类．
3. 类型选择器:选择具有给定节点名和语法的所有HTML元素元素．

请注意:通用选择器(*)对特异性没有影响。

如果在同一个元素上有多个具有相同特异性的声明，如类选择器和属性选择器，那么最后一个声明(即。样式表后面列出的声明)将应用于元素。

在编写网站的HTML和CSS代码时，还有一个重要的规则要记住:重要规则。这是上面提到的所有具体规则的例外。让我们在下面仔细看看它的意思。

尽管在组合属性值时，使用!important属性比遵循许多专一性规则更容易，但它被认为是一种不好的实践。这是因为它打破了样式表的自然级联，使维护和调试网站变得更加困难。

然而，在某些特定的用例中，使用!important属性是理想的。一个这样的用例是定义实用程序类。Chris Coyier介绍CSS技巧以按钮类为例。

请注意我将使用W3Schools在线代码编辑器根据Coyier的代码创建下面的示例。您可以单击任何Source链接查看示例的完整代码片段，并创建自己的代码片段。

假设你想让按钮类的目标元素看起来像相同的按钮:红色背景，白色字体颜色，纯黑色边框。如果没有!important属性，您将使用下面的代码使链接看起来像一个按钮。

HTML:

CSS:

.button {
背景:红色;
颜色:白色;
填充:3 px;
border - radius: 5 px;
边框:1px纯黑色;
｝

结果:

源

现在让我们假设你继续构建你的网页。在某个时候，您将一个ID为“content”的新部分添加到HTML中。本节包含另一个与按钮类相关的链接。您还可以在CSS中添加另一个规则，将ID名为“content”的所有元素定义为具有蓝色虚线边框。您将得到以下代码。

HTML:

<节id = "内容" >
 text text blah Do Thing 
< / >节

CSS:

.button {
背景:红色;
颜色:白色;
填充:3 px;
border - radius: 5 px;
边框:1px纯黑色;
｝
#内容{
边框:1px点蓝色;
｝

结果:

源

因为ID选择器比类选择器有更高的特异性，选择器的CSS样式#内容优先于选择器的CSS样式.button．这就是为什么第二个元素具有蓝色虚线边框，而不是纯黑色边框。

无论您是从头开始构建站点还是使用类似的框架，这样的场景都是不可避免的引导CSS．您所处理的代码量越大，就越难跟踪CSS选择器的特殊性。

通过使用!important属性，你可以避免在你的站点上出现上述情况的风格不一致。下面让我们看看如何准确地使用这个属性。

如何在CSS中使用Important

在CSS中使用!important规则很容易。你只需要在一行的末尾加上!important，就在分号之前。所以语法是:

元素{
样式属性!重要;
｝

让我们看看上面例子中的CSS在添加!important规则时是如何变化的。

HTML保持不变:

<节id = "内容" >
 text text blah Do Thing 
< / >节

CSS就变成:

.button {
背景:红色!重要;
颜色:白色!重要;
填充:3 px !重要;
border - radius: 5 px !重要;
边框:1px纯黑色!很重要;
｝
#内容{
边框:1px点蓝色;
｝

其结果是:

源

您将注意到，由于使用了!important规则，两个元素看起来是一样的。

但是，假设你改变了网站的配色方案，或者你不想让按钮类的所有元素看起来都一样。不管出于什么原因，您都可能想在CSS中重写!important规则。让我们看看下面是如何做到的。

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

由于用户定义的样式表将覆盖作者样式表，无论其特殊性如何，读者可以在不使用!important标记的情况下添加CSS规则。但是，如果作者样式表使用!important规则来定义其字体大小或颜色，那么在用户样式表中就必须使用!important规则。

让我们继续使用上面的相同按钮示例。例如，我的网站已经将!important规则应用到按钮类。但现在我确实希望所有ID名为“content”的元素都有蓝色虚线边框。

我应该简单地重写代码，从CSS中删除所有重要的标签。但假设我时间紧迫，正在寻找快速解决方案。然后我可以简单地将!important标签添加到CSS ID选择器中。然后这两个声明都将使用!important属性，并且，由于ID选择器比类选择器具有更高的特异性，内容部分中的元素将具有蓝色的虚线边框。

HTML保持不变:

<节id = "内容" >
 text text blah Do Thing 
< / >节

CSS就变成:

.button {
背景:红色!重要;
颜色:白色!重要;
填充:3 px !重要;
border - radius: 5 px !重要;
边框:1px纯黑色!很重要;
｝
#内容{
边框:1px蓝色圆点!重要;
｝

其结果是:

源

假设我想让网站上的所有按钮都有蓝色虚线边框。同样，我应该简单地重写代码，但我可以使用!important标记进行快速修复。使用相同的类选择器.btn，并为蓝色虚线边框和一个!important标签添加一个新规则，我可以简单地将它添加到样式表中的现有规则之后。因为它来得较晚，所以具有更高的特异性，并将应用于具有.btn类的元素。

HTML保持不变:

<节id = "内容" >
 text text blah Do Thing 
< / >节

CSS就变成:

.button {
背景:红色!重要;
颜色:白色!重要;
填充:3 px !重要;
border - radius: 5 px !重要;
边框:1px纯黑色!很重要;
｝
.button {
边框:1px蓝色圆点!重要;
｝

结果:

源

在CSS中使用!important属性

虽然!important声明应该很少在代码中使用，但仍然有必要理解这个属性是什么以及如何使用它。也许您需要在用户样式表中使用!important规则。也许你会接管一个包含规则实例的网站。不管是什么原因，熟悉!important属性对于学习HTML和CSS是非常有用的一步。