在 HTML 中，链接使用 <a> 标签来定义。默认情况下，使用链接时会有一个下划线，这是为了区别其他的文本内容。然而，在某些情况下，我们可能希望去除链接的下划线，以达到更加美观的效果。
使用 text-decoration 属性
最简单的方法是使用 text-decoration 属性将链接的下划线去除。该属性有以下几个值：
- underline: 下划线（默认值）
- overline: 上划线
- line-through: 中划线
- none: 无
我们可以将 text-decoration 属性的值设为 none 即可去除链接的下划线。示例代码如下：
<a href="#" style="text-decoration: none;">这是一个没有下划线的链接</a>
但是，这种方法有一个缺点，就是如果有其他的文本也需要去除下划线，就要一个一个设置样式，显得十分繁琐。
使用 CSS Reset
相比于上述方法，更为简便的做法是使用 CSS Reset。我们可以先去掉所有元素的默认样式，再手动设置需要的样式。这样的好处是可以在页面的任何地方使用，而不仅仅局限于单个链接。
下面是一个常见的 CSS Reset 样式：
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------
------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- ---------
----- ------ ------- ------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
---------- -----
------------ -------
--------------- ---------
-
-- -------- --
- -
---------------- -----
-在文档的 <head> 中引入该样式表即可。注意，CSS Reset 可能会对多个元素的样式进行重置，因此在引入前需要考虑是否与现有样式冲突。
总结
在前端开发中，去除链接的下划线是一个常见的需求。我们可以使用 text-decoration 属性对单个链接进行处理，也可以使用 CSS Reset 对整个页面进行处理。选择哪种方式取决于具体情况，一般来说，如果只有少量链接需要去除下划线，可以使用前者，而如果页面中需要大量去除下划线，可以使用后者，提高代码的复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64782997968c7c53b046b4bc