CSS 和下划线

标签 css

为什么链接使用下划线?

<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>

最佳答案

因为这是默认的(用户代理 css 有这个规则,在每个标签 a 中应用下划线)。默认不是inherit,所以即使父标签有下划线,子标签也不会得到它。


编辑 1:

例如firefox有这个规则:

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

默认为:

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

然后,在您的示例中,标签 a 将继承 div text-decoration。


编辑 2:

您可以使用以下方式覆盖默认行为:

a {
    text-decoration: inherit;
}

关于CSS 和下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3596427/

相关文章:

css - 从子 css 覆盖父级的最大宽度

html - Bootstrap 768px 媒体查询不工作

html - 输入类型 ="number"在 Firefox 中工作错误

html - 当父元素具有带有计算功能的高度时,为什么子元素的百分比高度不起作用?

css - Bootstrap 4 - 调整输入字段的宽度

html - 为什么我的图像没有粘在一起?

jquery - 使用 $.get() 检索 HTML 代码段后, Font Awesome 图标消失了

css - 二级菜单 wordpress 上的样式

CSS 3 渐变在 ie 8 中不起作用

Javascript 按钮单击更改背景