css and underline
Why is the link using the underline?
<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>
Because this is the default (user agent css have this rule, to apply underline in every tag a). The default isn't inherit, so even if parent tag has underline, the child won't get it.
EDIT 1:
For example, firefox have this rule:
*|*:-moz-any-link {
text-decoration:underline;
}
Default would be:
*|*:-moz-any-link {
text-decoration:inherit;
}
Then, in your example, the tag a would inherit div text-decoration.
EDIT 2:
You can overwrite default behavior with:
a {
text-decoration: inherit;
}
It's the default behavior of the a tag. It doesn't match the #text style.
I think you want to replace this...
#text{
text-decoration: none;
}
with this...
#text a:link{
text-decoration:none;
}
this tells the rule to apply to all anchors that are children of the tag who's id is 'text'
It's included in the default browser CSS. It's just as if this was included prior to your style tag:
a{
text-decoration: underline;
}
Sure, the link also matches #text, but since a is more specific, it wins. Any attributes not explicitly specified by the browser's a (such as font-size) will be inherited.
加载中,请稍侯......
精彩评论