Question

非常简单的问题，但令我感到沮丧。在页面的导航栏中，我希望它通常是一种颜色，然后具有不同的颜色悬停效果。

检查元素时，由于某种原因颜色被取消，我不确定原因。

.navigation {
  text-align: center;
  padding: 0 0;
  font-size: 1.25em;
  letter-spacing: .1em;
  text-decoration-color: #ee8719;
  margin: 0;
}

.homenav {
  text-decoration-color: #ffffff;
  color: black;
}

a:hover {
  color: #ad6205;
}

ul li {
  display: inline;
  text-decoration-color: #ee8719;
}

<header class="banner">
  <nav class="navigation">
    <ul class="homenav">
      <li>
        <a href="">Projects</a>
      </li>
      <li>
        <a href="">Blog</a>
      </li>
      <li>
        <a href="">About</a>
      </li>
      <li>
        <a href="">Contact</a>
      </li>
    </ul>
  </nav>
</header>

感谢任何帮助

Answer 1

这实际上是the spec样式中https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration的定义行为：

文本装饰跨越后代元素。这意味着无法在后代上禁用其祖先之一上指定的文本修饰。

（更多细节见Live demo with addressing）

如果您想设置文字颜色，请使用text-decoration属性。

文字装饰颜色不适用

1 个答案: