文本转换不能改变/被覆盖？ （css） [英] text-transform cannot change/be overwritten? (css)
问题描述
我正在学习CSS，我不明白为什么某些其他文字和第2行对它们有红色下划线效果。我认为我或者改变类为其他类或将其重置为无类class2
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
我试过'text-decoration：none'.line2和.others和文字仍为红色下划线。
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>
</html>
推荐答案
这看起来很奇怪， into the CSS spec：
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.
查看 http://www.w3.org/TR/REC-CSS1/#text-decoration
这是一种特殊的继承，与标准的CSS继承不同，这就是为什么你不能用其他规则，更具体的选择器或！important来覆盖它。
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.
没有真正的修复而无需调整HTML。避免这个问题的最简单的方法是避免在块上设置文本装饰（特别是像你的< div class =line> 这样的'container'我将使用类似：
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!
这篇关于文本转换不能改变/被覆盖？ （css）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
