悬停时，为什么整个导航div都是洋红色而不是蓝色？

Question

使用id或class选择元素问题吗？整个导航div悬停时应为蓝色，因为它是在洋红色之后应用的。

.navigation {
  color: salmon;
  height: 100px;
}

#navigation:hover {
  color: magenta;
}

.navigation:hover {
  color: blue;
}

.navigation li a {
  text-decoration: none;
  color: inherit;
}

  <div id="navigation" class="navigation">I am navigation text!
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>

Answer 1

请参考此资源：Calculating CSS Specificity Value

  

...简单地使用类名本身具有较低的特异性值，并且被另一个选择器所击败，后者将ID值定位到无序列表。该句子中的重要单词是类别和ID。 CSS对类别和ID应用了截然不同的特异性权重。实际上，ID具有无限多的特异性值！也就是说，没有任何一个单独的类可以超过ID。

总而言之，ID比Class更具体，因此在color和{{1中指定了具有相同CSS属性的元素（例如ID） }}将具有Class属性规范的值，而不是ID规范的值。

Class样式更加具体，将胜过Inline样式。

来源：https://css-tricks.com/specifics-on-css-specificity/#article-header-id-0