Javascript 文字装饰：无！重要的是没有工作

无论我做什么，我都不能去掉下划线。我有正确的目标元素，因为我可以更改其他CSS样式，但下划线每次都保持不变。关于这一点，我已经仔细研究了所有其他问题，没有任何方法是有效的。即使我进入chrome开发工具，也不会手动将元素的文本装饰设置为“无”

下面是屏幕截图、React组件代码和css代码。链接到github：

反应组分

import React from 'react'
import '../styles//App.css';
import '../styles/normalize.css';
import { Link } from 'react-router-dom';

class Header extends React.Component {
    render() {
        return (
            <header>
                <Link to="/">
                    <div id="ajessen-logo">
                        <img src={require('../assets/logo-raw.png')} alt="Ajessen Logo" />
                    </div>
                </Link>
                <nav>
                    <ul>
                        <Link to="/">
                            <li>Home</li>
                        </Link>
                        <Link to="/services">
                            <li>Services and Skills</li>
                        </Link>
                        <Link to="/projects">
                            <li>Projects</li>
                        </Link>
                        <Link to="/about">
                            <li>About Me</li>
                        </Link>
                        <Link to="/contact">
                            <li>Contact Me</li>
                        </Link>
                    </ul>
                </nav>
            </header>
        )
    }
}

export default Header

---

首先，您需要更改App.css文件的导入

import "./styles//App.css";

到

以及要使用

文本装饰

而不是

文本装饰样式

的CSS属性，并且要将其应用于

锚定

否

列表项

 header > nav > ul > a {
  text-decoration: none !important;
 }

---

在

App.CSS

文件末尾添加此CSS可修复您的问题锚定上的下划线是不是？尝试使用header>nav>ul>a:hover>li和每个a:variation，但仍然不会更改任何内容。您的“html”无效。

ul

唯一允许的子项是

li

。链接应位于

li

反之亦然。文本装饰也适用于链接…而不是

li

.Ty。在你发布这篇文章前几秒钟就搞定了。

import "./styles/App.css";

 header > nav > ul > a {
  text-decoration: none !important;
 }