Question

在以下示例中，<li>样式中的颜色选择器没有效果，但background-color和font-weight样式的效果恰到好处。

如果这不仅仅是操作员错误，而是一些微妙的功能冲突，我很想知道在哪里可以找到我绊倒的下一个奇怪事情的参考。我尝试删除背景颜色并使用颜色的数值。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <!-- based on https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements -->

  <title>Untitled</title>
  <meta name="generator" content="BBEdit 8.2">
  <style>
    ul {
      padding: 0;
    }
    
    li {
      padding: 3px;
      margin-bottom: 5px;
    }
    
    li:nth-of-type(even) {
      background-color: #ccc;
      color: darkred;
    }
    
    li:nth-of-type(odd) {
      background-color: #eee;
    }
    
    li:hover {
      font-weight: bold;
      color: red;
    }
    
    a {
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="#">United Kingdom</a></li>
    <li><a href="#">Germany</a></li>
    <li><a href="#">Finland</a></li>
    <li><a href="#">Russia</a></li>
    <li><a href="#">Spain</a></li>
    <li><a href="#">Poland</a></li>
  </ul>
</body>

</html>

Answer 1

您需要在悬停时设置锚点的颜色。

a:hover {
  color: red;
  text-decoration: underline;
}

目前，它在悬停时使用锚点的默认颜色，而red未被继承。

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <!-- based on https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements -->

  <title>Untitled</title>
  <meta name="generator" content="BBEdit 8.2">
  <style>
    ul {
      padding: 0;
    }
    
    li {
      padding: 3px;
      margin-bottom: 5px;
    }
    
    li:nth-of-type(even) {
      background-color: #ccc;
      color: darkred;
    }
    
    li:nth-of-type(odd) {
      background-color: #eee;
    }
    
    li:hover {
      font-weight: bold;
    }
    
    a {
      text-decoration: none;
    }
    
    a:hover {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="#">United Kingdom</a></li>
    <li><a href="#">Germany</a></li>
    <li><a href="#">Finland</a></li>
    <li><a href="#">Russia</a></li>
    <li><a href="#">Spain</a></li>
    <li><a href="#">Poland</a></li>
  </ul>
</body>

</html>

＆＃13;

FWIW，我将从HTML4文档类型切换为HTML5文档类型。

<!DOCTYPE html>

Answer 2

这是因为有更多特定规则覆盖了li元素上的样式。每个浏览器都有自己的一组默认样式，称为“用户代理样式”，由浏览器确定。锚标记color有一个用户代理样式，但font-weight没有。因此，font-weight的继承值会在悬停时应用于您的链接，但color不会。继承的任何值都具有比可能应用的任何其他样式（甚至是默认用户代理样式）更低的“特异性”。从下图中可以看出，在chrome中，颜色设置为-webkit-link。所有其他主流浏览器都有类似的风格。

enter image description here

要解决此问题，您需要将样式直接应用于锚点。您可以使用li:nth-of-type(even) a，a:hover（或li:hover a但我更喜欢将:hover样式仅保留在锚点上）的规则执行此操作，等等。关键是，你需要将样式放在锚本身上。否则，它只是隐式继承，浏览器会将自己的用户代理样式视为更具体的样式。

Answer 3

也许尝试使用十六进制颜色而不是键入它们的方式？
您可以尝试将样式内联到列表中吗？即
尝试将css应用于a标签而不是li标签，即：

：悬停{ 红色; };
尝试使用第n个子选择器而不是第n个类型：

ul＆gt; *：nth-child（2n）＆lt; - 偶数 ul＆gt; *：nth-child（2n-1）＆lt; -for odd

老实说，我不确定，但我认为上述内容应该有效。如果没有，请告诉我，我会尽力帮助。

使用颜色：里面的li元素

3 个答案: