为什么我不能设置锚点元素的样式?



这是我所有的代码(代码看起来很乱,因为我刚开始学习大约2/3周前)。我似乎不能样式锚元素。我甚至试着给他们上一节课,但也不管用。我对这事有点陌生。

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
body {
height: 100%;
margin: 0;
padding: 0;
background: #bbb;
}
.ex-house {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.house-dh {
position: absolute;
top: -20%;
left: 2%;
padding: 0px;
margin: 0px;
color: rgb(255, 255, 255);
font-family: 'Bree serif';
font-size: 125px;
text-align: center;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.about-gnco1 {
position: absolute;
color: rgb(255, 255, 255);
font-family: 'Inter';
font-size: 35px;
text-align: left;
margin: 0px;
padding: 0px;
left: 2%;
top: 20%;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
/* this is my code for the style element i think i did it right but when i run it. the a href element dosent change */
.front-button {
font-family: 'Bebas Neue';
font-size: 20px;
color: white;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.front-button a {
margin: 0 20px;
}
<body>
<div class="front">
<img class="ex-house" src="https://via.placeholder.com/80" alt="dreamhouse">
<div class="house-dh">
<p>grandnew.co</p>
</div>
<div class="about-gnco">
<p class="about-gnco1">Is here to help you<br> build your own<br> Dream House.</p>
</div>
</div>
</div>

<div class="front-button">
<a href="#">CUSTOMIZE</a>
<a href="#">DESIGNS</a>
<a href="#">PLANS</a>
<a href="#">ABOUT US</a>
</div>
</body>

如果你的意思是链接的下划线你可以使用text-decoration方法例如a{text-decoration:none}这个代码会删除标签上的任何装饰如果你想对所有的标签使用这个函数你可以写a{text-decoration:none}如果你想为特定的标签设置装饰你可以在标签上设置一个类example

<a href="https://stackoverflow.com">go to stackoverflow</a>
<a class="a-tag" href="https://stackoverflow.com">go to stackoverflow</a>

CSS

a{ //for all <a> tags
text-decoration:none
}
.a-tag{ // only for tag who have the a-tag class
text-decoration:none
color:black;
}

这对我有用。'.front-button a'中的文本样式,而不是'.front-button'中的文本样式

.front-button a {
margin: 0 20px;
font-family: 'Bebas Neue';
font-size: 20px;
color: red;
text-shadow: 2px 2px 3px rgba(241, 238, 53, 0.5);
}

联系方式链接样式的更多信息:

https://www.w3schools.com/css/css_link.asp

如何在CSS中更改链接样式?