了解特异性:在不使用的情况下实现所需的选择器结果！重要

Question

我正在努力理解CSS中的特异性。

我目前的理解是，特异性与继承非常相似，但在某种程度上定义得更具体。

Mozilla特定性定义：

特定性是浏览器决定哪些CSS属性值与元素最相关，因此将被应用的手段。具体性是基于匹配规则，这些规则由不同类别的CSS选择器组成。

当前任务是：

重构.active a和.copyright的CSS声明，以便可以删除!important规则

CSS：

.main li a {
color: #7ab2c1;
}
.active a {
color: #826c55 !important;
}
.primary p {
font-size: 12px;
}
.copyright {
font-size: 10px !important;
}

以及相关的HTML：

<nav class="main">
<ul class="group">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
[...]
<footer class="primary">
<p><a href="#">Sign up</a> for our newsletter, it's a racket!</p>
<p class="copyright">Copyright &copy; Sven's Snowshoe Emporium. All Rights Reserved.</p>
</footer>

有人能指导我完成重构过程，帮助我掌握基本概念吗？

Answer 1

一个类的特异性为10。元素的特异性为1。

因此，在第一种情况下：

• .main li a选择子的特异性为12
• .active a选择器的特异性为11

因为它们都针对同一个元素，而前者具有更高的特异性，后者在设计元素的战斗中失败了。

在第二个例子中：

• .primary p选择子的特异性为11
• CCD_ 7选择器具有10的特异性

同样，因为它们都针对同一个元素，而前者具有更高的特异性，后者在设计元素的战斗中失败了。

!important 注释胜过所有特异性。因此，在应用该元素的情况下，.active a和.copyright重新获取元素。

如果你想删除!important，这是正确的做法，因为这里没有必要，你可以提高选择器的特异性。

CCD_ 12的特异性为100。这样可以快速提升选择器的优先级。

以下是一些例子：

.main li a      { color: #7ab2c1; }  /* previous winner; specificity 12 */
.main .active a { color: #ff0000; }  /* added class selector; specificity now 21 */
.primary p      { font-size: 12px; } /* previous winner; specificity 11 */
#copyright      { font-size: 8px;} /* switched to ID selector; specificity now 100 */

<nav class="main">
<ul class="group">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<footer class="primary">
<p><a href="#">Sign up</a> for our newsletter, it's a racket!</p>
<p id="copyright">Copyright &copy; Sven's Snowshoe Emporium.
All Rights Reserved.</p>
</footer>

参考文献：

• 如何使CSS类优先于id
• CSS特定性
• CSS特殊性：你应该知道的事情
• 之间的关系！重要和CSS特异性

Answer 2

您可以将.copyright更改为许多内容，但对我来说，以下两项中的一项似乎最符合逻辑：

.primary .copyright

或

p.copyright

特异性应该做的是查看选择器的特异性有多强，并决定是否应该遵循该规则。

• 媒体查询内部的CSS比外部完全相同的CSS更具体
• Id比类更具体
• html body section p.special.selected:hover比p更具体
• 等等

有一大堆规则可以让你的选择者对每个部分都有"分数"。要点越多，就越具体。经过大量的练习，你可以在不考虑的情况下重写统治CSS

Answer 3

在本例中，您试图使设置要覆盖的属性的选择器不那么特定。这样，你就不必花太多的时间来推翻它们。

让我们看看

.main li a {
color: #7ab2c1;
}
.active a {
color: #826c55 !important;
}

.main li a非常具体：它在类名中包含main的元素中选择li中的所有锚标记。你怎么能不那么具体呢？根据您的标记，

.main a {
color: #7ab2c1;
}

不太特定，仍然适用，并且会被.active选择器覆盖，因为它具有相同的特定性(一个类+一个元素)。nav a甚至普通的旧a也可以作为选择器，这取决于您希望应用该规则的程度(或程度)。

现在，让我们看看页脚。

.primary p {
font-size: 12px;
}
.copyright {
font-size: 10px !important;
}

我们如何才能使第一个选择器不那么具体？把它改成怎么样

p {
font-size: 12px;
}

您的.copyright选择器更具体，会覆盖它(但是，所有p元素的默认font-size都是12px，这可能不是您想要的)。

我们可以将其限制在页脚：

.primary {
font-size: 12px;
}

这将限制font-size属性仅限于页脚元素，并允许您使用后续规则覆盖它。

通常，您试图根据特定性值进行重构，以使要覆盖的内容具有尽可能小的特定性值。您可以使用最通用的选择器来实现这一点，这些选择器将应用您想要的规则，而不将这些规则应用于不应该具有规则的元素。

Answer 4

基本上使用html标签作为选择器会增加少量的特异性，使用类会增加中等的特异性、使用ID会增加大量的特异性以及使用!important胜过一切。

.main li a选择器使用1类+2个html标记，而.active a仅使用1类+1个html标记。前者比后者具有更多的特异性，但使用!important会覆盖这一点，并强制应用后者的样式。

为了消除对!important的需求，您需要a)降低.main li a的特异性，或者b)增加.active a的特异性。我建议选择a，并将选择器更改为.main a。这与.active a具有相同的特异性，但由于CSS的级联性质，最后出现的样式将被应用，不需要!important。

第二个场景中的原理相同——.primary p有1个类+1个html标签，而.copyright只有1个类。在这种情况下，我会选择选项b，并将选择器更改为.primary .copyright。2个类比1个类+1个html标签具有更高的特异性，并且该样式将在不需要!important的情况下应用。

最终CSS：

.main a {
color: #7ab2c1;
}
.active a {
color: #826c55;
}
.primary p {
font-size: 12px;
}
.primary .copyright {
font-size: 10px;
}