即使在 text-decoration:none 之后，链接仍保留下划线答案

【问题标题】：Link retains underline even after text-decoration:none即使在 text-decoration:none 之后，链接仍保留下划线
【发布时间】：2019-09-02 09:08:46
【问题描述】：

我正在为通过 GatsbyJS 制作的网站制作导航栏。我正在尝试对导航栏中的链接进行样式设置，使它们没有下划线。

我已经将链接设置为没有任何文本装饰——当我在浏览器中检查元素时，它甚至显示“文本装饰：无”属性。我还确认我的 CSS 正在影响对象——我可以更改文本的颜色，例如，我无法影响的只是文本装饰。

CSS：

.nav {
  background: #fd8;
}

.nav ul {
  text-align: center;
  border: 1px solid #000;
}

.nav ul li {
  display: inline-block;
  padding: 8px 10px;
  margin: 0;
}

.nav ul li a {
  color: #221;
  text-decoration: none;
}

html + js:

...
import { Link } from "gatsby"
import styles from "./navbar.module.css"

...

      <nav className={styles.nav}>
        <ul>
          <li>
            <Link style={{ textDecoration: 'none' }} to="/about">
              About
            </Link>
          </li>

编辑：带有 textDecoration 的内联样式是我在发布此问题之前所做的一些摆弄的产物，直到最近才出现。删除它对问题没有影响。

按请求呈现 HTML：

<nav class="navbar-module--nav--25Dcz">
  <ul>
    <li>
      <a href="/#">About</a>
    </li>
    ...
  </ul>
</nav>

【问题讨论】：

这让我觉得这是一个纯粹的 CSS 问题。请发布呈现的 HTML。
你有没有在锚点或列表项上寻找border-bottom？
我已经添加了渲染的 HTML。另外，我已经确认该元素没有下边框——我可以添加一个，它会显示在下划线旁边。

标签： css reactjs gatsby

【解决方案1】：

你可以选择全局的a标签或者具体的，在文字修饰后添加!important。这将覆盖 gatsby 施加的任何默认样式。

.nav ul li a {
  color: #221;
  text-decoration: none !important;
}

【讨论】：

【解决方案2】：

我无法解释为什么，但是当我引用一个不太具体的类时，我能够让文本装饰消失，而没有文本装饰。因此，如果您有一个不太具体的包装类，请尝试使用它来定位链接

.wrapper a {
   text-decoration:none;
}

【讨论】：

【解决方案3】：

我想尽一切办法删除它，然后读完后我记得我在链接中添加了 https://www.gatsbyjs.org/docs/typography-js/

图标有下划线，任何将被下划线在我删除它之前没有任何效果。

【讨论】：

【解决方案4】：

所以对于那些仍在寻找答案的人来说。 确实是个BUG。至少对于

标签及其嵌套而言。只有一个旁路，即使这样也有一点限制。所以这是一个带有固定（删除）下划线的示例，它还包含关于添加什么、避免什么的注释。

https://stackblitz.com/edit/keep-remove-underline-from-nested-li-item?file=index.html [工作文本装饰去除]

解决办法是：
2. 避免使用空白 nowrap

【讨论】：

【解决方案5】：

我发现错误的下划线实际上是一个 1px 的框阴影，可能来自我找不到与 Gatsby Typography 插件相关的某种全局样式。

【讨论】：

这里有类似的问题，虽然我必须重置的属性是background-image，这是一个线性渐变，最终看起来是一条下划线。

【解决方案6】：

您的问题是，当您应该使用标签名称选择器时，您使用的是类选择器 (.nav)。更改为 nav ul li a{text-decoration:none} 应该可以解决您的问题。如果这不起作用，那么您可能在某个地方有一些优先级更高的 CSS 覆盖它。

【讨论】：

【解决方案7】：

当您说.nav 时，您想以此选择一个班级。正如我所见，在您的 html 中，

nav (<nav...) 是一个带有navbar-module--nav--25Dcz 类的标签

因此，如果您将 CSS 更改为：

（从.nav中删除句点字符.）

nav {...}
nav ul {...}
nav ul li {...}
nav ul li a {...}

它应该可以正常工作。

另外，看看 Styled Components：https://www.styled-components.com/，它让您可以在 JS 中编写 CSS 并使用来自 Less 和 SASS 等预处理器的类似功能。

希望这会有所帮助！

【讨论】：

我相信我在我的 HTML/React 中选择了适当的类：<nav className={styles.nav}> 无论如何，我尝试了这个解决方案并从我的 css 中删除了“.”，但问题仍然存在。跨度>
您是否尝试在nav ul li a:hover {...} 或nav ul li a:focus {...} 或nav ul li a:active {...} 上添加text-decoration: none？