文字装饰:无！重要不工作 [英] Text Decoration: None !important not working

问题描述

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

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

问题截图

反应组件

从 'react' 导入 Reactimport '../styles//App.css';导入'../styles/normalize.css';从'react-router-dom'导入{链接}；类头扩展 React.Component {使成为() {返回 (<标题><链接到="/"><div id="ajessen-logo"><img src={require('../assets/logo-raw.png')} alt="Ajessen Logo"/>

</链接><导航><ul><链接到="/"><li>首页</li></链接><链接到="/服务"><li>服务和技能</li></链接><链接到="/项目"><li>项目</li></链接><链接到="/关于"><li>关于我</li></链接><链接到="/联系人"><li>联系我</li></链接></nav></标题>)}}导出默认标题

app.css

/*字体片名:Baloo Tamma 2字幕/大文本:DM Serif 文本基本文本: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{字体系列:'Baloo Tamma 2'，草书；}h2{font-family: 'DM Serif Text'，草书；}页脚{文本对齐:居中；底边距:10px；边距顶部:自动；底部:10px；左:自动；右:自动；左边距:自动；右边距:自动；显示:弹性；弹性方向:行；flex-wrap: nowrap;对齐内容:居中；对齐项目:居中；高度:100%；}标题{显示:弹性；弹性方向:行；flex-wrap: nowrap;justify-content: flex-start;/*边框底部:黑色实心1px；*/}标题 >导航 >升 >＞李{文字装饰:无！重要；颜色:黑色;}标题 >导航{宽度:60%；底边距:0px；边距顶部:自动；显示:弹性；}标题 >导航 >ul{底边距:0px；}标题 >一种 {宽度:40%；最小高度:125px；底边距:0px；}标题 >导航 >ul{列表样式类型:无；显示:弹性；弹性方向:行；flex-wrap: nowrap;justify-content: 空间环绕；对齐内容:flex-end；宽度:100%}#ajessen-logo {宽度:100%；高度:自动；填充顶部:5%；填充左:2.5%；左边距:自动；右边距:自动；底边距:0px；边距顶部:自动；}#ajessen-logo >图像{宽度:90%；高度:自动；左边距:自动；右边距:自动；底边距:0px；边距顶部:自动；}#github-footer-icon {边距顶部:自动；边距底部:自动；左边距:25%；}

解决方案

两件事，第一，你需要把 App.css 文件的导入改成

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

到

import "./styles/App.css";

以及您想使用 text-decoration 而不是 text-decoration-style 的 CSS 属性，并且您想将其应用到 anchor没有列表项

 标头 >导航 >升 >一种 {文字装饰:无！重要；}

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

No matter what I do, I can't remove the underline. I have the right element targeted, as I am able to change every other CSS style, but the underline stays every time. I've looked through about every other question regarding this and no method is working. Not even if I go into chrome dev tools, manually set the element's text-decoration to none.

Screenshot, React component code, and css code below. Link to github: https://github.com/andrewtyl/www.ajessen.com/

Screenshot of issue

React Component

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

解决方案

Two Things , Firstly,You need to change the import of the App.css file from

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

to

import "./styles/App.css";

and the CSS property you want to use text-decoration not text-decoration-style and you want to apply it on the anchor no the list item

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

adding this CSS at the end of the App.css file fixes your issue

这篇关于文字装饰:无！重要不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！