仅将超链接下划线样式应用于正文答案

【问题标题】：Apply hyperlink underline style to body only仅将超链接下划线样式应用于正文
【发布时间】：2021-03-03 10:07:08
【问题描述】：

我试图将以下锚文本下划线样式应用于我的网站，但它也被应用于页眉和页脚链接。

a {
   text-decoration: none;
   border-bottom: #EA215A 0.125em solid;
}

如何将此样式仅应用于正文链接？

【问题讨论】：

【解决方案1】：

没有适用于所有网站的单一代码。这取决于 HTML 代码 - 你能分享一下吗？

假设 HTML5，使用 `article` 选择器

如果网站使用 HTML5，则文章文本可能位于 <article> 标记中。

如果是这种情况，您应该可以使用：

article a {
  text-decoration: none; border-bottom: #EA215A 0.125em solid;
}

有时人们将<header> 和/或<footer> 标签放在<article> 标签内，因此上述方法不起作用。

如果 HTML 输出做得好，文章可能有部分。因此，将上面的选择器替换为 article section a 可能会在文章中输出页眉和页脚的情况下为您提供更好的结果。

您不必盲目猜测文章内容有什么选择器。右键单击文章文本并选择 inspect element 或类似名称（可能位于上下文菜单的底部）。

您可能可以通过查看标签来构建一个选择器，该选择器适用于文章内容。

在这种情况下熟悉浏览器的开发功能。

您必须确保这适用于网站所有类型的网页。
看来您对 HTML 不太了解……是时候熟悉它了。

【讨论】：

【解决方案2】：

应该够了

body a { 
 text-decoration: none; 
 border-bottom: #EA215A 0.125em solid;
}

【讨论】：

【解决方案3】：

要仅应用于正文，您应该使用 css 选择器，您可以使用元素标签、类或 id 来指定您应该在哪里应用样式。

查看此页面以获取有关 css 选择器的更多信息：

【讨论】：