链接即使在文本修饰后仍保留下划线:无

我正在为通过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>

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

当你说.nav时，你想通过它选择一个类。正如我所看到的，在你的 html 中，

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

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

(从.nav中删除句点字符.(

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

它应该可以正常工作。

另外，看看样式化组件：https://www.styled-components.com/它允许您用JS编写CSS，并使用来自Less和SASS等预处理器的类似功能。

希望这有帮助！

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

所以对于那些仍在寻找答案的人来说。这真的是一个错误。至少带有

标签及其嵌套。只有一个旁路，即使这样也有一点限制。因此，这是一个带有固定(删除(下划线的示例，它还包含有关要添加的内容，要避免的内容的注释。
https://stackblitz.com/edit/keep-remove-underline-from-nested-li-item?file=index.html [工作文本装饰去除]
解决方案是：
1. 需要对
2. 避免使用空格无换行

我尝试了一切方法来删除它，然后在阅读本文后，我记得我在链接中添加了什么 https://www.gatsbyjs.org/docs/typography-js/

图标下划线，任何将要被下划线的内容都带有下划线在我删除它之前没有任何效果。

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

.wrapper a {
   text-decoration:none;
}

可以选择

全局 a 标签或具体，在文本修饰后添加 !important 。这将覆盖盖茨比强加的任何默认样式。

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

相关内容

最新更新

热门标签：