如何移除<a>标签装饰并避免<p>标签样式被<a>标签覆盖？

嘿，我来帮你搞定这两个问题，其实都是关于CSS优先级和继承的小知识点：

1. 移除标签的文本装饰 #

你已经写了text-decoration: none，这个方向是对的，但其实不需要加!important——除非你有其他优先级更高的样式已经给a标签加了下划线，否则直接写：

a {
  text-decoration: none;
}

就可以完全移除下划线啦！!important尽量少用，它会打乱CSS的正常优先级规则，后期维护起来很麻烦。

2. 让

标签内的继承文本颜色 #

你遇到的问题是：

标签设置了黑色，但里面的还是默认蓝色。这是因为浏览器给标签内置了默认的文本颜色，这个样式的优先级比父元素

的样式更高。

里的继承父元素的颜色就行，给你的CSS加上这一行：

#paragraph a {
  color: inherit;
}

这样就会自动继承

标签的黑色，不会再用浏览器的默认蓝色了。

完整的代码示例 #

<style>
a {
  text-decoration: none;
}
#paragraph {
  color: black;
}
#paragraph a {
  color: inherit;
}
</style>
<p id="paragraph"><a href="#">this is a link</a></p>

这样修改后，链接就没有下划线，同时颜色和

标签保持一致啦！

内容的提问来源于stack exchange，提问作者STEPHEN bui