文字装饰：无！重要不工作答案

【问题标题】：Text Decoration: None !important not working文字装饰：无！重要不工作
【发布时间】：2020-07-11 05:29:32
【问题描述】：

无论我做什么，我都无法删除下划线。我有正确的目标元素，因为我可以更改所有其他 CSS 样式，但下划线每次都保持不变。我已经查看了有关此问题的所有其他问题，但没有任何方法有效。即使我进入 chrome 开发工具，手动将元素的 text-decoration 设置为 none。

下面的屏幕截图、React 组件代码和 css 代码。 github链接：https://github.com/andrewtyl/www.ajessen.com/

Screenshot of issue

反应组件

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

/*
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%;
}

【问题讨论】：

锚点上有下划线吗？
尝试使用 header > nav > ul > a:hover > li 和每个 a:variation 仍然没有改变任何东西。
您的 'html 无效....ul 的唯一允许子级是 li....链接应该在 li 内而不是相反。
文本装饰也适用于链接...不是li。

标签： javascript html css node.js reactjs

【解决方案1】：

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

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 可以解决您的问题

【讨论】：

泰。在您发布此内容前几秒钟就想通了。