无论我做什么,我都无法删除下划线。我有正确的目标元素,因为我可以更改所有其他 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%;
}