body{ text-decoration: underline; } #text{ text-...">
All geek questions in one place

Css and underline

Why is the link used with 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>
+3
source share
4 answers

Since this is the default value (the css user agent has this rule, applies an underscore in each a tag). By default, this is not inherit, so even if the parent tag has an underscore, it will not receive it.

EDIT 1:

For example, firefox has this rule:

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

The default value is:

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

Then, in your example, the tag ainherits divtext-decoration.

EDIT 2:

You can overwrite the default behavior with:

a {
    text-decoration: inherit;
}
+3
source

This is the default behavior of the tag a. It does not match the style #text.

+2
source

, ...

#text{ text-decoration: none; }

...

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

, , id ""

+1

CSS CSS . :

a{
    text-decoration: underline;
}

Of course, the link also matches #text, but since it is amore specific, it wins. Any attributes not explicitly specified by the browser a(for example, font size) will be inherited.

0
source

Source: https://habr.com/ru/post/1762178/

More articles:


All Articles