css“text-decoration：none”无效

Question

我不明白为什么text-decoration: none在以下代码中不起作用。它无法删除单词yes的下划线。

.button {
  color: black;
  text-decoration: none;
}
body {
  font-family: 'Roboto', 'Microsoft JhengHei', sans-serif;
  font-size: 24px;
}

<a href="www.example.com">
  <div class="button" id="yes">
    Yes
  </div>
</a>

从下面的示例中可以看出，孩子可以覆盖父母。这与上述问题相矛盾。

.b {
  color: black;
}
.c {
  color: yellow;
}

<div class="b">
  <div class="c">
    abc
  </div>
</div>

Answer 1

默认情况下，a代码具有下划线效果（使用文字修饰：下划线），因此要删除此内容，您必须从a代码中移除其子元素。

如果你说的话，颜色值可以从父元素覆盖到子元素，但为什么不进行文本修饰呢？

这是因为text-decoration属性不会从其父元素继承样式，而是依赖于它自己的元素。

检查w3c reference。