CSS - 为什么在a:hover下text-decoration不起作用？

Question

我有以下样式规则：

我有以下样式规则：

.twoColFixRt #nav-primary .nav li a,
.twoColFixRt #nav-primary .nav li a:visited {
  color: #00ff00;
  text-decoration: none;
}

.twoColFixRt #nav-primary .nav li a span {
  display: block;
  padding: 0 10px;
  font-size: 15px;
}

.twoColFixRt #nav-primary .nav li a:hover {
  text-decoration: underline;
  color: #ff0000;
}

问题1> 我不知道为什么上面的代码中的 a:hover 不起作用。换句话说，当光标在导航项上方时，下划线不会出现。

但是，当我将光标悬停在导航项上方时，我确实看到了颜色的变化。

问题2> 我正在使用 DW CS4 + Firebug。有没有一种方法可以检测哪个规则抑制了 a:hover，以便我可以在将来解决类似的问题？

- q0987

Answer 1

您可以通过将text-decoration应用于嵌套的来显示它，如下所示：

.twoColFixRt #nav-primary .nav li a:hover span {
    text-decoration: underline;
    color:#FF0000;
}

如果您对它目前无法正常工作的原因感兴趣，您可以阅读有关内联框（<a>）包含块框（<span>）的此问题。

至于检测应用于元素的规则，我使用Firefox的Web Developer附加组件。它的CSS > 查看样式信息（CTRL + SHIFT + Y）特别方便。

- Pat

---

哇，显然这只在Firefox中是必要的（下划线在原始代码中使用Chrome和IE（8）http://jsfiddle.net/vUkZ6/）。 - Peter Ajtai

你好 Pat，你的解决方案对我非常有效。此外，我安装了Web开发人员工具，但不知道如何使用它。我使用CSS->查看样式信息，但是我不知道在哪里可以找到被抑制的规则信息。能否给我一点提示呢？ 谢谢 - q0987

@q0987 很高兴听到这个消息。网页开发人员没有特别列出被压制的规则。当您在“查看样式信息”中时，单击任何元素，您将获得应用的所有样式列表。然后您可以查看列表，看是否有任何意外覆盖的内容。 - Pat

Answer 2

在您的元素的内联CSS中应用text-decoration属性。 如果这有效，请找出是什么导致了您的外部CSS混乱。

- bogatyrjov

Answer 3

before内容的展示必须是块级元素，像这样工作得很好：

.category li a {
    font-size: 15px;
    margin: 0;
    display: block;
    margin-bottom: 0.8rem;
}

.category li a::before {
    content: "\2022";
    color: var(--primaryColor);
    font-size: 1.4rem;
    display: block;
    margin-left: 0.4rem;
    float: right;
}

.category li a:hover::before {
    text-decoration: none !important;
}

- Ashnet