CSS中提升优先级属性!important的用法问题总结

CSS中的!important优先级设定可以在需要重要属性时使用。!important可以覆盖任何其它样式声明。然而，滥用!important会导致维护上的极大问题，所以只有当必要的时候才应使用。

以下是!important属性的用法问题总结：

1. 何时使用!important

通常，在使用CSS时，我们使用层叠规则（Cascading Rules）将多个样式应用在一个元素上，根据选择器的特殊性和源代码的顺序来决定哪些样式具有较高的优先级。但是在某些情况下，我们需要将某个特定样式视为最优先，例如：

• 当我们想要更改框架的样式和/或使用第三方小部件;

• 当我们希望修复浏览器间的兼容性问题时;

• 当我们需要遵循规则如WCAG 2.0（网络内容无障碍指南）或WAI-ARIA（Web内容无障碍）指南等时。

在上述情况下，使用!important语句可以更好地进行样式设置。

2. 如何使用!important

语法：属性: 值!important;

!important关键词是放置在属性值之后的，用于指定该样式的最高优先级。这意味着样式优先级的其他规则都会被忽略。

下面是两个!important的示例说明：

示例 1:

/* HTML */
<h1 class="title">Hello, World!</h1>

/* CSS */
.title {
  font-size: 24px;
  color: #222;
}

/* 下面的样式被添加后，文字的颜色将变为red */
.title {
  color: red !important;
}

在此示例中，我们在样式表中声明了一个.title 类，定义了它的颜色和字体大小。在需要重写颜色时，我们使用!important关键字，并将颜色设置为red。由于!important的优先级更高，它将覆盖以前的颜色值。

示例 2:

/* HTML */
<div class="container">
  <div class="box">This is a box</div>
</div>

/* CSS */
.box {
  width: 50px;
  height: 50px;
  background-color: #ccc;
}

.container .box {
  width: 100px;
}

.container .box:last-child {
  width: 150px;
}

在这个例子中，我们有一个包含两个div的HTML结构。两个div都具有.box 类。我们为该类定义了一些CSS属性，然后在.container .box和.container .box:last-child选择器中应用了更具体的属性（如宽度）。随着元素位置的不同，它们会遵循不同的规则。

我们还可以添加一个虚拟类（:before）来创建一个虚拟元素并将其应用于元素。

.container .box:last-child:before {
  display: block;
  content: "I'm virtual element!";
  color: red;
}

上述表示，当最后一个.box元素出现在一个名为.container的元素中时，我们将向它添加:before伪类，并使用CSS属性添加文本和颜色。在虚拟元素上使用!important时，它将覆盖原始规则中的任何其他颜色设置。

在使用!important关键字来覆盖现有样式时，应该非常小心并尽可能避免它。它应该仅用于必要时，而且应该非常仔细地确定它是一种适合解决问题的最佳方法。