我无法删除带有链接的 anchor 的下划线。当我尝试将它添加到元素和 CSS 中时,使用 style="text-decoration:none"
不起作用。我相信我的问题存在于 CSS 的其他地方,但我不确定。
This is the underline I'm trying to remove
这是带有 href 链接的问题 HTML:
我使用了 CSS 重置 https://meyerweb.com/eric/tools/css/reset/在我的 CSS 代码的开头。
body {
background: #262d47;
color: #888;
font: 300 16px/22px "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*
================================
Grid
================================
*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container,
.grid {
margin: 0 auto;
width: 1196px;
}
.container {
padding-left: 30px;
padding-right: 30px;
}
.grid,
.col-1-3,
.col-2-3 {
padding-left: 15px;
padding-right: 15px;
}
.col-1-3,
.col-2-3 {
display: inline-block;
vertical-align: top;
}
.col-1-3 {
width: 33.33%;
}
.col-2-3 {
width: 66.66%;
}
/*
========================================
Clearfix
========================================
*/
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
/*
================================
Typography
================================
*/
h1, h3, h4, h5, p {
margin-bottom: 22px;
}
h1, h2, h3, h4 {
color: #92d4cc;
}
h1 {
font-size: 36px;
line-height: 44px;
}
h2 {
font-size: 24px;
line-height: 44px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
strong {
font-weight: 400;
}
cite, em {
font-style: italic;
}
p {
color: #FFF;
}
/*
========================================
Links
========================================
*/
a {
color: #92d4cc;
text-decoration: none;
}
a:hover {
color: #a9b2b9;
}
p a {
border-bottom: 1px solid #92d4cc;
}
/*
========================================
Buttons
========================================
*/
.btn {
border-radius: 5px;
display: inline-block;
margin: 0;
}
.btn-alt {
border: 1px solid #92d4cc;
padding: 10px 30px;
}
/*
========================================
Primary header
========================================
*/
.logo {
border-top: 4px solid #92d4cc;
float: left;
font-size: 48px;
font-weight: 100;
letter-spacing: .5px;
line-height: 44px;
padding: 40px 0 22px 0;
text-transform: uppercase;
}
.tagline {
margin: 66px 0 22px 0;
text-align: right;
}
.primary-nav {
font-size: 14px;
font-weight: 400;
letter-spacing: .5px;
text-transform: uppercase;
}
/*
========================================
Primary footer
========================================
*/
.primary-footer {
color: #92d4cc;
font-size: 14px;
padding-bottom: 44px;
padding-top: 44px;
}
.primary-footer small {
float: left;
font-weight: 400;
}
/*
========================================
Navigation
========================================
*/
.nav {
text-align: right;
}
/*
========================================
Home
========================================
*/
.hero {
line-height: 44px;
padding: 22px 80px 66px 80px;
text-align: center;
}
.hero h2 {
font-size: 36px;
}
.hero p {
font-size: 24px;
font-weight: 100;
}
.teaser a:hover h3 {
color: #a9b2b9;
}
/*
========================================
About box
========================================
*/
.about {
color: #92d4cc;
text-transform: uppercase;
margin: auto;
font-size: 14px;
}
.marxist {
color: #FFF;
text-decoration: none !important;
}
<section class="teaser col-1-3">
<a href="venue.html">
<h5>Venue</h5>
<h3>The beautiful Theater</h3>
</a>
<p>The beautiful historical theater will be our conference venue.<a class="marxist" href="https://www.marxists.org/archive/marx/works/1848/communist-manifesto/">☭</a></p>
</section>
最佳答案
由于下面的代码,下划线问题来了:
p a {
/*border-bottom: 1px solid #92d4cc;*/
}
我已经评论了上面的代码,一切都按照你的要求工作。
查看以下代码段以获取解决方案。
如果您需要任何其他帮助,请告诉我。
/*
========================================
Custom styles
========================================
*/
body {
background: #262d47;
color: #888;
font: 300 16px/22px "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*
================================
Grid
================================
*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container,
.grid {
margin: 0 auto;
width: 1196px;
}
.container {
padding-left: 30px;
padding-right: 30px;
}
.grid,
.col-1-3,
.col-2-3 {
padding-left: 15px;
padding-right: 15px;
}
.col-1-3,
.col-2-3 {
display: inline-block;
vertical-align: top;
}
.col-1-3 {
width: 33.33%;
}
.col-2-3 {
width: 66.66%;
}
/*
========================================
Clearfix
========================================
*/
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
/*
================================
Typography
================================
*/
h1, h3, h4, h5, p {
margin-bottom: 22px;
}
h1, h2, h3, h4 {
color: #92d4cc;
}
h1 {
font-size: 36px;
line-height: 44px;
}
h2 {
font-size: 24px;
line-height: 44px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
strong {
font-weight: 400;
}
cite, em {
font-style: italic;
}
p {
color: #FFF;
}
/*
========================================
Links
========================================
*/
a {
color: #92d4cc;
text-decoration: none;
}
a:hover {
color: #a9b2b9;
}
p a {
/*border-bottom: 1px solid #92d4cc;*/
}
/*
========================================
Buttons
========================================
*/
.btn {
border-radius: 5px;
display: inline-block;
margin: 0;
}
.btn-alt {
border: 1px solid #92d4cc;
padding: 10px 30px;
}
/*
========================================
Primary header
========================================
*/
.logo {
border-top: 4px solid #92d4cc;
float: left;
font-size: 48px;
font-weight: 100;
letter-spacing: .5px;
line-height: 44px;
padding: 40px 0 22px 0;
text-transform: uppercase;
}
.tagline {
margin: 66px 0 22px 0;
text-align: right;
}
.primary-nav {
font-size: 14px;
font-weight: 400;
letter-spacing: .5px;
text-transform: uppercase;
}
/*
========================================
Primary footer
========================================
*/
.primary-footer {
color: #92d4cc;
font-size: 14px;
padding-bottom: 44px;
padding-top: 44px;
}
.primary-footer small {
float: left;
font-weight: 400;
}
/*
========================================
Navigation
========================================
*/
.nav {
text-align: right;
}
/*
========================================
Home
========================================
*/
.hero {
line-height: 44px;
padding: 22px 80px 66px 80px;
text-align: center;
}
.hero h2 {
font-size: 36px;
}
.hero p {
font-size: 24px;
font-weight: 100;
}
.teaser a:hover h3 {
color: #a9b2b9;
}
/*
========================================
About box
========================================
*/
.about {
color: #92d4cc;
text-transform: uppercase;
margin: auto;
font-size: 14px;
}
.marxist {
color: #FFF;
text-decoration: none !important;
}
<section class="teaser col-1-3">
<a href="venue.html">
<h5>Venue</h5>
<h3>The beautiful Theater</h3>
</a>
<p>The beautiful historical theater will be our conference venue.<a class="marxist" href="https://www.marxists.org/archive/marx/works/1848/communist-manifesto/">☭</a></p>
</section>
关于html - 无法从 HTML/CSS 中的 anchor 链接中删除下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62976781/