文字装饰:无!重要不工作

IT技术 javascript html css node.js reactjs
2021-05-08 07:39:53

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

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

问题截图

react组件

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%;
}
1个回答

两件事,首先,您需要将 App.css 文件的导入从

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

import "./styles/App.css";

和你想要的CSS属性使用text-decorationtext-decoration-style,你想它适用于anchorlist item

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

App.css文件末尾添加此 CSS可解决您的问题