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>
It's the default behavior of the a tag. It doesn't match the #text style.
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 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.
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'