Question

我正在学习CSS，我不明白为什么某些其他文字和第2行会对它们产生红色下划线效果。我以为我要么为其他类更改它，要么为class line2重置为none

我为.line2和.others尝试了`text-decoration：none'，文字仍然是红色下划线。

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

Answer 1

起初看起来很奇怪，但这种行为内置于CSS规范中：

此属性不是继承的，但元素应与其父元素匹配。例如，如果元素带有下划线，则该行应跨越子元素。即使后代元素具有不同的“颜色”值，下划线的颜色也将保持不变。

请参阅http://www.w3.org/TR/REC-CSS1/#text-decoration 。

这是一种特殊的继承，与标准的CSS继承不同，这就是为什么你不能用其他规则，更具体的选择器或！important重写它。

我猜这是因为文本修饰效果最初设计用于内联而不是块元素。想象一下内部有一个跨度的链接 - 跨度采用父链接的文本修饰属性是有意义的。

如果不调整HTML，则无法解决问题。避免问题的最简单方法是避免在块上设置文本修饰（尤其是像<div class="line">这样的“容器”块）。我会使用类似的东西：

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

很好的发现 - 学习新东西总是好的！

Answer 2

请改用：

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

Answer 3

尝试提高选择器的特异性

div.others
div.item2

文本转换不能改变/被覆盖？（CSS）

3 个答案:

文本转换不能改变/被覆盖？ （CSS）

3 个答案:

文本转换不能改变/被覆盖？（CSS）