文字修飾：無！重要的是不起作用

Question

無論我做什么，我都無法刪除下划線。 我有針對性的正確元素，因為我能夠更改所有其他 CSS 樣式，但下划線每次都會保留。 我已經查看了與此相關的所有其他問題，但沒有任何方法有效。 即使我 go 進入 chrome 開發工具，手動將元素的文本裝飾設置為無。

屏幕截圖、React 組件代碼和下面的 css 代碼。 github鏈接： https://github.com/andrewtyl/www.ajessen.com/

問題截圖

反應組件

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

應用程序.css

/*
FONTS
Titles: Baloo Tamma 2
Subtitles/Large Text: DM Serif Text
Basic Text: Times New Roman
*/

@import url('https://fonts.googleapis.com/css?family=Baloo+Tamma+2|DM+Serif+Text&display=swap');

html {
    font-family: 'Times New Roman', Times, serif;
}

h1 {
    font-family: 'Baloo Tamma 2', cursive;
}

h2 {
    font-family: 'DM Serif Text', cursive;
}

footer {
    text-align: center;
    margin-bottom: 10px;
    margin-top: auto;
    bottom: 10px;
    left: auto;
    right: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 100%;

}

header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    /*border-bottom: black solid 1px;*/
}

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

header > nav {
    width: 60%;
    margin-bottom: 0px;
    margin-top: auto;
    display: flex;
}

header > nav > ul {
    margin-bottom: 0px;
}

header > a {
    width: 40%;
    min-height: 125px;
    margin-bottom: 0px;
}

header > nav > ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: flex-end;
    width: 100%
}

#ajessen-logo {
    width: 100%;
    height: auto;
    padding-top: 5%;
    padding-left: 2.5%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: auto;
}

#ajessen-logo > img {
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: auto;
}

#github-footer-icon {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 25%;
}

Answer 1

兩件事，首先，您需要將 App.css 文件的導入從

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

到

import "./styles/App.css";

以及您想使用text-decoration而不是text-decoration-style的 CSS 屬性，並且您想將其應用於anchor不是list item

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

在App.css文件末尾添加此 CSS 可解決您的問題

Answer 2

我曾經遇到過一個無法消除的下划線，花了我一段時間才找到線索：

a {
  ...
  background-repeat: repeat-x;
  background-size: 2px 2px;
  background-position: 0 100%;
}