Question

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

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

CSS：

HashMap

html + js：

.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;
}

编辑：使用textDecoration进行内联样式设计是我在发布此问题之前所做的一些摆弄的结果，直到最近才出现。删除它对该问题没有影响。

通过请求呈现HTML：

...
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>

Answer 1

我发现错误的下划线实际上是一个1像素的盒子阴影，可能是因为我找不到与Gatsby Typography插件相关联的某些全局样式。

Answer 2

您说.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）的类似功能。

希望这会有所帮助！

Answer 3

您的问题是，当应该使用标记名称选择器时，您正在使用类选择器（.nav）。更改为nav ul li a{text-decoration:none}应该可以解决您的问题。如果那不起作用，那么您可能在某些优先级较高的CSS上将其覆盖。

Answer 4

对于那些仍在寻找答案的人。 这确实是一个错误。。至少与

标签及其嵌套有关。只有一个旁路，即使那样也有一定的局限性。因此，这是一个带有固定（已删除）下划线的示例，其中还包含有关添加内容，避免内容的注释。

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

解决方案是：
1. - 避免使用空白nowrap

Answer 5

我尽一切努力将其删除，然后阅读此书后，我记得我在链接https://www.gatsbyjs.org/docs/typography-js/

中添加了内容

带下划线的图标，带下划线的所有内容直到我删除它，一切都没有。

Answer 6

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

.wrapper a {
   text-decoration:none;
}

Answer 7

您可以选择全局标签，也可以选择特定标签，并在修饰文字后添加!important。这将覆盖gatsby施加的任何默认样式。

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

即使在文本装饰后，链接也会保留下划线：无

7 个答案: