理解特异性：在不使用 !important [重复] 的情况下实现所需的选择器结果

我试图理解特异性 in CSS.

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

Mozilla 特异性定义 https://developer.mozilla.org/en/docs/Web/CSS/Specificity:

特异性是浏览器决定哪些 CSS 属性值与元素最相关并因此将被应用的方法。特异性基于由不同种类的 CSS 选择器组成的匹配规则。

目前的任务是：

重构 CSS 声明.active a and .copyright所以这样!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>

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

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

因此，首先：

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

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

在第二种情况下：

• the .primary p选择器的特异性为 11。
• the .copyright选择器的特异性为 10。

同样，因为它们都针对相同的元素，并且前者具有更高的特异性，所以后者在元素样式的战斗中失败了。

The !important注解 https://www.w3.org/TR/css-cascade-3/#importance胜过一切特殊性。因此，应用该方法后，.active a and .copyright重新获取元素。

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

An ID特异性为 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 的优先级？ https://stackoverflow.com/q/35657410/3597276
• CSS 特异性 http://cssspecificity.com/
• CSS 特异性：你应该知道的事情 https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
• !important 和 CSS 特异性之间的关系 https://stackoverflow.com/q/5805040/3597276