Question

今天我偶然发现了以下情况：

	a { text-decoration: underline; }
	h1{ text-decoration:none;}

<a href="#"><h1>Title</h1></a>

这会产生带下划线的标题元素。

块元素的规则不适用。我意识到我必须设置锚元素的样式以获得所需的效果。我的问题是：为什么？

规范中描述此行为的规则是什么？

Answer 1

只是因为您的h1位于a标记内有下划线...所以你会看到它加下划线，但实际上只是他的容器有下划线。你的CSS工作正常。

如果要删除链接h1的下划线，只需反转dom顺序：

a {
  text-decoration: underline;
}

<h1><a href="#">My Linked H1</a></h1>

<h1>Not linked H1</h1>

Answer 2

有些CSS属性不会像你这样被覆盖。因此a的下划线适用于其所有孩子。你可以看到它像边框。当父容器具有边框时，您无法通过删除子元素的边框来删除它。背景，填充，边距等也是一样。

要了解更多信息，您可以更改文本修饰的属性，以查看它们是否分别表现：

a {
  text-decoration: underline;
  color:red;
}

h1 {
  text-decoration: line-through;
  color:green;
}

h2 {
  text-decoration: overline;
  color:blue;
}

<a href="#">
  <h1>Title</h1>
  <h2>tile</h2>
</a>

Answer 3

您可以在此处找到here一些文档作为锚标记。

您可以阅读：

默认情况下，链接在所有浏览器中显示如下：


未访问的链接带有下划线和蓝色

访问过的链接带有下划线和紫色

活动链接带下划线且红色

在您的情况下，您使用h1设置text-decoration:none，但事实上，h1尚未设置text-decoration道具。

默认情况下，浏览器会使用下划线样式编译a标记和子标记。

Here一些关于样式锚标签的提示。

元素由于父锚而加下划线

3 个答案: