如何全局避免在HTML页面中为链接添加下划线

Question

在HTML中，默认行为似乎是在Web链接下划线。在我创建的HTML网页中，这看起来很难看。

是否有办法避免整个网页出现下划线？

这是一段CSS代码（从网络上收集，对不起，我似乎已经失去了源代码），对我来说似乎很好，除了以下划线：

body{
    background-color:#f4f4f4;
    color:#555555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: normal;
    line-height: 1.6em;
}


<style type="text/css">
a:link    {
  /* Applies to all unvisited links */
  text-decoration:  none;
  background-color: #bbb;
  color:            blue;
  } 
a:visited {
  /* Applies to all visited links */
  text-decoration:  none;
  background-color: #ddd;
  color:            #f0f;
  } 
a:hover   {
  /* Applies to links under the pointer */
  text-decoration:  none;
  background-color: red;
  color:            #fff;
  } 
a:active  {
  /* Applies to activated links */
  text-decoration:  none;
  background-color: black;
  color: white;
  } 
</style>

它给了我这样的链接：

如何修改CSS以停止下划线？

---

编辑：对不起，HTML文件中嵌入了另一个CSS代码 从Amac指出的从Emacs的组织模式导出，这可能是压倒一切 上面的CSS代码。不幸的是，我不太擅长CSS才能识别出问题所在：-D

<!--/*--><![CDATA[/*><!--*/

.title {
  text-align: center;
}

.todo {
  font-family: monospace;
  color: red;
}

.done {
  color: green;
}

.tag {
  background-color: #eee;
  font-family: monospace;
  padding: 2px;
  font-size: 80%;
  font-weight: normal;
}

.timestamp {
  color: #bebebe;
}

.timestamp-kwd {
  color: #5f9ea0;
}

.right {
  margin-left: auto;
  margin-right: 0px;
  text-align: right;
}

.left {
  margin-left: 0px;
  margin-right: auto;
  text-align: left;
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.underline {
  text-decoration: underline;
}

#postamble p,
#preamble p {
  font-size: 90%;
  margin: .2em;
}

p.verse {
  margin-left: 3%;
}

pre {
  border: 1px solid #ccc;
  box-shadow: 3px 3px 3px #eee;
  padding: 8pt;
  font-family: monospace;
  overflow: auto;
  margin: 1.2em;
}

pre.src {
  position: relative;
  overflow: visible;
  padding-top: 1.2em;
}

pre.src:before {
  display: none;
  position: absolute;
  background-color: white;
  top: -10px;
  right: 10px;
  padding: 3px;
  border: 1px solid black;
}

pre.src:hover:before {
  display: inline;
}

pre.src-sh:before {
  content: 'sh';
}

pre.src-bash:before {
  content: 'sh';
}

pre.src-emacs-lisp:before {
  content: 'Emacs Lisp';
}

pre.src-R:before {
  content: 'R';
}

pre.src-perl:before {
  content: 'Perl';
}

pre.src-java:before {
  content: 'Java';
}

pre.src-sql:before {
  content: 'SQL';
}

table {
  border-collapse: collapse;
}

caption.t-above {
  caption-side: top;
}

caption.t-bottom {
  caption-side: bottom;
}

td,
th {
  vertical-align: top;
}

th.right {
  text-align: center;
}

th.left {
  text-align: center;
}

th.center {
  text-align: center;
}

td.right {
  text-align: right;
}

td.left {
  text-align: left;
}

td.center {
  text-align: center;
}

dt {
  font-weight: bold;
}

.footpara:nth-child(2) {
  display: inline;
}

.footpara {
  display: block;
}

.footdef {
  margin-bottom: 1em;
}

.figure {
  padding: 1em;
}

.figure p {
  text-align: center;
}

.inlinetask {
  padding: 10px;
  border: 2px solid gray;
  margin: 10px;
  background: #ffffcc;
}

#org-div-home-and-up {
  text-align: right;
  font-size: 70%;
  white-space: nowrap;
}

textarea {
  overflow-x: auto;
}

.linenr {
  font-size: smaller
}

.code-highlighted {
  background-color: #ffff00;
}

.org-info-js_info-navigation {
  border-style: none;
}

#org-info-js_console-label {
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
}

.org-info-js_search-highlight {
  background-color: #ffff00;
  color: #000000;
  font-weight: bold;
}


/*]]>*/-->

Answer 1

在编辑中，请注意.underline { text-decoration: underline; }，已明确创建了一个类，并将其分配给下划线文本。我希望这是您强调的地方。

我希望从具有underline类的所有链接元素中删除该类。

或者创建更多specific选择器

a.underline {text-decoration:none;}

比使用!important更好：https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/

Answer 2

很明显，某些CSS会覆盖您的CSS。粉色不是链接的默认颜色。尝试对样式使用！important。例如text-decoration: none !important;

Answer 3

您的网页中的样式为何会如此行为可能有多种原因。

1. 优先顺序规则，在该规则中，浏览器将首先偏爱嵌入式样式，然后偏爱链接tag，最后偏爱style标签。 也许您在特定的链接中嵌入了样式，或者您使用的是外部CSS文件，该文件会覆盖样式标签中包含的样式

2. 由w3定义的级联规则，其中指出更具体的规则将覆盖更通用的规则，也许您正在使用一个外部css文件，该文件包含一个特定的规则，例如下一个覆盖样式的规则style标签内的规则

   p > a { text-decoration: none; color: pink }

但是，如果您想要一种简单的方法来使所有链接按照您的意图运行，您可以在要替换其余样式的样式规则旁边使用!important规则

text-decoration: none !important;