Question

为什么链接使用下划线？

<html>
<head>
<style type="text/css">
body{
  text-decoration: underline;
}
#text{
  text-decoration: none;
}
</style>
</head>
<body>
Text text text <br/>
<div id = "text">
  <a href="#">link</a>
</div>
</body>
</html>

Answer 1

因为这是默认值（用户代理css具有此规则，所以在每个标记中应用下划线a）。默认值不是inherit，因此即使父标记有下划线，孩子也不会得到它。

编辑1：

例如，firefox有这个规则：

*|*:-moz-any-link {
    text-decoration:underline;
}

默认为：

*|*:-moz-any-link {
    text-decoration:inherit;
}

然后，在您的示例中，代码a将继承div文本修饰。

编辑2：

您可以使用以下内容覆盖默认行为：

a {
    text-decoration: inherit;
}

Answer 2

这是a标记的默认行为。它与#text样式不匹配。

Answer 3

我想你要替换这个......

#text{ text-decoration: none; }

有了......

#text a:link{ text-decoration:none; }

这告诉规则应用于标识为id为'text'的标记的子节点的所有锚点

Answer 4

它包含在默认浏览器CSS中。就好像它包含在样式标记之前：

a{
    text-decoration: underline;
}

当然，该链接也匹配#text，但由于a更具体，因此获胜。浏览器的a未明确指定的任何属性（如font-size）都将被继承。

css和下划线

4 个答案: