Question

我试图获得CSS优先权但由于某种原因，此代码不能正确使用#hs中定义的a：hover样式。 #hs li.druid a:link似乎覆盖#hs li a:hover中定义的背景颜色，即使我只指定了一个：link而不是a：hover。它确实继承了其他类似颜色的东西。我放置代码的位置并不重要，我尝试过切换它但结果相同。

HTML：

<div id="nav">
  <ul id="hs">
    <li class="druid">
      <a href="druid">Druid</a>
    </li>
  </ul>
<div>

CSS：

#hs {  
  list-style-type: none;
  padding: 0;
  overflow: hidden;
}
#hs li a:link, #hs li a:visited {
  display: block;
  width: 150px;
  font-weight: bold;
  color: #FFFFFF;  
  padding: 10px 0px;
  margin: 25px auto;
  border-radius: 4px 4px 4px 4px;
  text-transform: uppercase;
}
#hs li a:hover, #hs li a:active {
  color: #00AA00;
  background-color: orange;
  text-decoration: none;
}
#hs li.druid a:link {
  background-color: #855C33;
}

Answer 1

归因于CSS specificity。

每个选择器的特定性：

#hs li.druid a:link - 122
#hs li a:hover - 112

您可以降低选择器#hs li.druid a:link的特异性。没有id，特异性从122降低到22。

li.druid a:link {
  background-color: #855C33;
}

更安全的方法是通过添加id选择器#hs li a:hover来提高选择器#nav的特异性。这样，您可以为每个选择器添加100个点，从而允许它覆盖其他选择器。

#nav #hs li a:hover,
#nav #hs li a:active {
  color: #00AA00;
  background-color: orange;
  text-decoration: none;
}

给定选择器calculating specificity这是一个相对有用的链接。

CSS优先级链接

1 个答案: