无法使用超链接删除下划线或更改文本颜色
Posted
技术标签:
【中文标题】无法使用超链接删除下划线或更改文本颜色【英文标题】：Cannot remove underline nor change text color using a hyperlink 【发布时间】：2022-01-02 14:01:38 【问题描述】：我的文本的某个部分有一个超链接，但是当我使用锚元素时，使用 CSS 关闭文本装饰，并将颜色更改为#987b74，它不起作用。有谁知道出了什么问题？我什么都试过了！
如果需要，我可以发送我的整个 CSS，请告诉我！谢谢您的帮助！ :)
header
background-image: url(banner1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #FACABC;
background-position: center;
display: block;
position: relative;
h1
text-align: center;
color: #FACABC;
font-family: RedRock, "Times New Roman", sans-sarif;
line-height: 5px;
.title
font-size: 500%;
h2
text-align: center;
font-family: primer, "Times New Roman", sans-sarif;
font-size: 200%;
text-shadow: 1px 1px 2px #FACABC;
color: #987b74;
#homelink
text-align: left;
text-decoration: none;
padding-left: 2%;
font-size: 135%;
font-family: RedRock, "Times New Roman", sans-sarif;
color: #FACABC;
text-shadow: 1px 1px 2px black;
ion-icon
padding-left: 6em;
font-size: 41px;
color: #987b74;
ion-icon:hover
color: #FACABC;
transition: all 0.5s ease;
body
font-family: RedRock, "Times New Roman", sans-sarif;
margin: 0;
.container
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index:1;
/* Nav bar*/
nav
z-index: 9999;
.container nav
width: 100%;
height: 76px;
font-size: 48px;
padding-left: 7em; /* Centers "Home, About me, Socials, etc" text */
.container nav a
text-align: center;
text-decoration: none;
color: #987b74;
padding-right: 100px;
.container nav ul
width: 100%;
height: 100%;
margin: 0 auto;
list-style-type: none;
transition: all 0.5s ease;
.container nav ul li
width: 10%;
float: left;
text-align: center;
color: #987b74;
font-size: 41px;
font-weight: bold;
transition: all 0.5s ease;
position: sticky;
cursor: pointer;
top: 0;
.container nav ul li:hover
color: #5E4C47;
.container nav ul li ul.sub-nav
position: absolute;
background: white; /* Background of drop down */
width: 75%;
height: 110px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14);
top: 75px;
left: 0;
visibility: hidden;
opacity: 0;
.container nav ul li ul.sub-nav li
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: 75%;
.container nav ul li:hover ul.sub-nav /* Drop down menu visibility */
visibility: visible;
opacity: 75%;
margin-top: 2px;
.container li
display: inline-block;
.container nav ul li ul.sub-nav a:hover
color: #5E4C47;
transition: all 0.5s ease;
.container nav ul li ul.sub-nav a
padding: 0;
main h2
padding-right: 10em;
padding-left: 10em;
main .learn-more
border-radius: 2px;
background-color: #FACABC;
border: none;
color: #987b74;
text-align: center;
font-size: 28px;
padding: 20px;
width: 275px;
transition: all 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
main .learn-more span
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
main .learn-more span:after
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
main .learn-more:hover span
padding-right: 25px;
main .learn-more:hover span:after
opacity: 1;
right: 0;
.video-trailer
background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
main ul li
list-style-type: none;
display: inline;
padding-left: 2%;
padding-right: 0%;
main h1
font-size: 60px;
footer
text-align: center;
color: #987b74;
.backgroundcolor /* To get that cream color background!*/
background-color: #f8f8f8;
table
font-family: primer, "Times New Roman", sans-sarif;
color: #987b74;
font-weight: bold;
border-collapse: collapse;
width: 50%;
margin-left: auto;
margin-right: auto;
table td, table th
padding: 8px;
table tr:nth-child(even)
background-color: #f2f2f2;
table tr:hover
background-color: #f2f2f2;
table th
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
color: #987b74;
font-size: 200%;
table td
border-top: 1px solid #987b74;
border-bottom: 1px solid #987b74;
border-right: 1px solid #987b74;
text-align: center;
td:last-child
border-right: 0px;
.video-trailer h1
color: #987b74;
.video-trailer h2 a
text-decoration: none;
color: #987b74;
<!DOCTYPE html>
<html>
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<a id="homelink" href="index.html">
<h2 id="homelink">HighItsKy</h2>
</a>
<br><br><br><br>
<span class="title"><h1>HighItsKy</h1></span>
<h2>part time streamer, full time vibe</h2>
<br><br>
<a href="https://www.twitch.tv/highitsky/" target="_blank"><ion-icon name="logo-twitch"></ion-icon></a>
<a href="https://discord.gg/M2umXEhkNq" target="_blank"><ion-icon name="logo-discord"></ion-icon></a>
<a href="https://youtube.com/highitsky" target="_blank"><ion-icon name="logo-youtube"></ion-icon></a>
<a href="https://www.instagram.com/highitsky_/" target="_blank"><ion-icon name="logo-instagram"></ion-icon></a>
<a href="https://www.tiktok.com/@highitsky" target="_blank"><ion-icon name="logo-tiktok"></ion-icon></a>
<a href="https://www.twitter.com/highitsky_/" target="_blank"><ion-icon name="logo-twitter"></ion-icon></a>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<br><br><br><br><br>
</header>
<div class="container">
<nav>
<ul>
<a href="index.html">
<li>Home</li>
</a>
<li>About Me
<ul class="sub-nav">
<a href="AboutMe.html">
<li>ABOUT</li>
</a>
<a href="Cloves.html">
<li>CLOVES</li>
</a>
</ul>
</li>
<li>Socials
<ul class="sub-nav">
<a href="Socials.html">
<li>SOCIALS</li>
</a>
<a href="Contact.html">
<li>CONTACT</li>
</a>
</ul>
</li>
<a href="Community.html">
<li>Community</li>
</a>
<a href="Partnerships.html">
<li>Partnerships</li>
</a>
<li>Support
<ul class="sub-nav">
<a href="Donate.html"><li>DONATE</li></a>
<a href="Merch.html"><li>MERCH</li></a>
<a href="Causes.html"><li>CAUSES</li></a>
</ul>
</li>
</ul>
</nav>
<div class="header"></div>
</div>
<main>
<div class="backgroundcolor">
<br>
<a href="https://clovessyndrome.org/what-is-cloves/"><button class="learn-more"><span>LEARN MORE </span></button></a>
<br><br><br><br><br>
<div class="video-trailer">
<br><br><br>
<h2>If you are ever interested in supporting some causes monetarily or not, click the link below. I have comprised some of <a href="Causes.html" target="_blank">my favorite organizations</a>, including a few that I have used personally!</h2>
<br><br><br><br><hr size="2" color="#987b74">
</div>
<footer>HighItsKy © 2020 </footer>
</div>
</main>
</html>【问题讨论】：
您的代码正在运行 - 您是否将 CSS 代码包含在正确的位置？ @alekskorovin 你好！我认为这可能与代码中的其他超链接有关。如果有帮助，我添加了完整的 CSS - 抱歉，我是这个网站的新手，并且通常编码 HTML！ 您的代码中有几个未关闭的 CSS 规则，用于链接样式。请更正那些：`table th padding-top: 12px;底部填充：12px；文本对齐：居中；颜色：#987b74；字体大小：200%； table tdborder-top: 1px solid #987b74;边框底部：1px 实心#987b74；右边框：1px 实心 #987b74;文本对齐：居中； ` @alekskorovin 哦，天哪，非常感谢。这样就解决了！ 【参考方案1】：感谢 cmets 中的@aleks korovin：
您的代码中有几个未关闭的 CSS 规则，用于链接样式。请更正：
table th
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
color: #987b74;
font-size: 200%;
table td
border-top: 1px solid #987b74;
border-bottom: 1px solid #987b74;
border-right: 1px solid #987b74;
text-align: center;
【讨论】：
以上是关于无法使用超链接删除下划线或更改文本颜色的主要内容，如果未能解决你的问题，请参考以下文章