Question

我正在尝试理解CSS中的特异性。

我目前的理解是特异性与继承非常相似，但在某些方面更具体地定义。

特异性是浏览器决定哪些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。
.copyright选择器的特异性为10。

同样，因为它们都针对相同的元素，而前者具有更高的特异性，后者失去了对元素进行样式化的战斗。

!important annotation胜过所有特异性。因此，应用该值后，.active a和.copyright会重新获取元素。

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

ID的特异性为100.因此可以快速优先选择选择器。

以下是一些例子：

＆＃13;

.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 */

＆＃13;

<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>

＆＃13;

参考文献：

Answer 2

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

.primary .copyright

或

p.copyright

应该做什么特殊性，看一下你的选择器具体的方式，并决定是否应遵循该规则。

媒体查询中的CSS比其外部的CSS更具体
Ids比类
html body section p.special.selected:hover比p
等

有很多规则可以让你的选择器“点”与每个部分。分数越多，越具体。经过大量的练习，你可以在不考虑它的情况下编写过多的CSS。

Answer 3

在此示例中，您尝试使选择器设置您希望覆盖的属性不太具体。这样，你就没有去覆盖它们了。

让我们来看看

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

.main li a非常具体：它在其className中的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

这会将[...] I want to get ?id=2 while '2' selected.属性限制为只有页脚元素，并允许您使用后续规则覆盖它。

一般情况下，您尝试根据specificity values进行重构，以使您想要覆盖的内容具有可能的最小特异性值。您可以使用大多数通用选择器来执行此操作，这些选择器将应用您需要的规则，而不将这些规则应用于不应具有这些规则的元素。

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;
}

理解特异性：在不使用！important

4 个答案: