为什么我不能为锚元素设置样式？答案

【问题标题】：Why can't I style anchor elements?为什么我不能为锚元素设置样式？
【发布时间】：2021-11-28 15:37:57
【问题描述】：

这是我所有的代码（代码看起来很乱，因为我大约 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>

【问题讨论】：

你到底想在这里实现什么？您尝试将什么样式应用于<a> 标签？
您的主播风格清晰。请修改得更具体，不要缩写英文单词。像专业人士一样写作。
您可以在上面的格式化标记中看到您有一个额外的结束 div 标记。一个好的编辑器有助于指出这些。
我的想法我知道是什么原因，你添加了你的css文件的链接吗？您将在标题标签下的 html 文件中添加这个

标签： html css hyperlink styles href

【解决方案1】：

这对我有用。 '.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);
}

link style

How do I change link style in CSS?

【讨论】：

这就是选择器在原始帖子中的样子。我不确定你在这里建议什么。您应该将 sn-p 复制到您的答案并展示您的解决方案。

【解决方案2】：

如果您的意思是链接的下划线，您可以使用 text-decoration 方法，例如a{text-decoration:none} 此代码将删除标签的任何装饰，因此如果您想对所有标签使用此功能，您将编写 a{text-decoration:none}所以如果你想设置特定标签的装饰，你可以在标签上给一个类，然后你可以改变一些东西example

HTML

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

【讨论】：

谢谢你的回答，但它仍然没有改变。不知道该怎么做。