text-transform cannot change/be overwritten? (css)_问答_开发者

text-transform cannot change/be overwritten? (css)

开发者 https://www.devze.com 2022-12-29 09:20 出处：网络

I am studying css and I do not understand why some OTHER text and line 2 has red underline effect on them. I thought I either changed it for class others or reset it to none for class line2

相关专题：css

I am studying css and I do not understand why some OTHER text and line 2 has red underline effect on them. I thought I either changed it for class others or reset it to none for class line2

I tried `text-decoration:none' for both .line2 and .others and the text was still red underlined.

    <html>
    <head>
    <style type="text/css">
    .line {color:red; text-transform:uppercase; text-decoration:underline;}

    .line2 {color:blue; text-transform:none;}

    .others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;}
    </style>
    </head>

    <body>
    <div class='line'>
        line 1
        <div class='others'><BR>some OTHER text<BR></DIV>
        <div class='line2'>
            <BR>line 2
        </div>
    </div>
    </body>
    </h开发者_Go百科tml>

It seems weird at first, but this behaviour is built into the CSS spec:

This property is not inherited, but elements should match their parent. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different 'color' values.

See http://www.w3.org/TR/REC-CSS1/#text-decoration.

This is a kind of special inheritance, different to the standard CSS inheritance, which is why you can't override it with other rules, more specific selectors, or !important.

I'd guess it's because text-decoration effects were originally designed to be applied to inline, not block elements. Imagine a link with a span inside it - it does make sense for the span to adopt the text-decoration properties of the parent link.

There isn't really a fix without adjusting the HTML. The easiest way to avoid the problem is to avoid setting text-decoration on blocks (especially 'container' blocks like your <div class="line">). I would use something like:

<html>
<head>
<style type="text/css">
.line {color:red; text-transform:uppercase; text-decoration:underline;}

.line2 {color:blue; text-transform:none;}

.others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;}
</style>
</head>

<body>
<div>
    <span class="line">line 1</span>
    <div class="others"><BR>some OTHER text<BR></DIV>
    <div class="line2">
        <BR>line 2
    </div>
</div>
</body>
</html>

Good find, though - it's always good to learn something new!

Use this instead:

<html>
   <head>
   <style type="text/css">
   .line .em {color:red; text-transform:uppercase; text-decoration:underline;}

   .line .line2 {color:blue; text-transform:none; text-decoration: none;}

   .line .others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;}
   </style>
   </head>

   <body>
   <div class='line'>
       <div class="em">line 1</div>
       <div class='others'><BR>some OTHER text<BR></DIV>
       <div class='line2'>
           <BR>line 2
       </div>
   </div>
   </body>
   </html>

Try increasing the specificity of your selectors