无法更改链接样式答案

【问题标题】：Can't change the style of link无法更改链接样式
【发布时间】：2021-10-22 08:36:45
【问题描述】：

我对编码非常陌生，目前我正在尝试更改我的 html 链接的样式。我已经将我的图片、<h1> 和<p> 嵌套在<a href> 中，以使其全部链接到同一个目的地，但现在一旦它成为链接，我就无法更改样式。下面是我的 HTML 和 CSS。

正如你在这个链接中看到的，第一个不是forestgreen https://aria-oslo-743-draft.superhi.com/blog.html

body {
  font-family: Poly;
  font-size: 18px;
  line-height: 1.5;
  background-color: #31fff511;
  color: #fa8601;
  margin: 80px auto 40px auto;
  width: 1120px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1,
nav {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
}

section {
  margin: 80px 0 80px 0;
  display: grid;
  grid-column: 2 / span 10;
  gap: 32px 32 px;
  text-align: center;
}

section h1 {
  color: forestgreen !important;
  text-decoration: none;
  margin: 0 0 0 32px;
}

section a {
  text-decoration: none;
  margin: 0 0 0 32px;
  transition: color 0.5s;
}

header a {
  color: blue;
  text-decoration: none;
  margin: 0 0 0 32px;
  transition: color 0.5s;
}

header a:hover {
  color: forestgreen;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

section img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

<section>
  <a href="blogpost.html">
    <img src="screenshot-2021-08-18-at-16.28.07.png">
    <h1> What in the JPEG 2</h1>
    <p> "Lorem ipsum" </p>
  </a>
</section>

【问题讨论】：

请使用tour 并阅读How to Ask。您说“一旦成为链接就无法更改样式”，但这意味着什么？ h1 的颜色为forestgreen，因此您已成功更改了该样式。请添加更多文字来解释您的期望。
对不起，这是我在这里提出的第一个问题。但是不，它仍然带有下划线，并且您可以在此处看到紫色：aria-oslo-743-draft.superhi.com/blog.html
好吧，当我查看此处提供的代码时，h1 在 Windows 10 上的 Chrome 92 中是 forestgreen。我不会去其他网站；问题应该在 Stack Overflow 上有一个 minimal reproducible example 来说明问题。听起来您在简化代码上还有更多工作要做。
查看您的博客页面，并将其与上面的 sn-p 进行比较，在您的博客页面上，HTML 的布局与您的代码 sn-p 不同。查看您的博客页面，您的
和

元素在您的元素之外。

标签： html css css-selectors css-specificity

【解决方案1】：

尝试将header a header a:hover 更改为section a

body {
  font-family: Poly;
  font-size: 18px;
  line-height: 1.5;
  background-color: #31fff511;
  color: #fa8601;
  margin: 80px auto 40px auto;
  width: 1120px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1,
nav {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
}

section {
  margin: 80px 0 80px 0;
  display: grid;
  grid-column: 2 / span 10;
  gap: 32px 32 px;
  text-align: center;
}

section h1 {
  color: forestgreen !important;
  text-decoration: none;
  margin: 0 0 0 32px;
}

section a {
  text-decoration: none;
  margin: 0 0 0 32px;
  transition: color 0.5s;
}

section a {
  color: blue;
  text-decoration: none;
  margin: 0 0 0 32px;
  transition: color 0.5s;
}

section a:hover {
  color: forestgreen;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

section img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

<section>
  <a href="blogpost.html">
    <img src="screenshot-2021-08-18-at-16.28.07.png">
    <h1> What in the JPEG 2</h1>
    <p> "Lorem ipsum" </p>
  </a>
</section>

【讨论】：

【解决方案2】：

您需要使用比一般链接规则更具体的 CSS 选择器来解决该特定链接的不同状态，即在您的情况下为 section a:link, section a:visited { ... } 和 section a:hover, section a:active { ... }

【讨论】：

【解决方案3】：

以下是来自https://www.w3schools.com/html/html_links_colors.asp 的sn-p，它解释了如何更新链接的颜色。您还需要考虑鼠标悬停、单击和访问时链接的颜色。

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

【讨论】：