给出这个精简的测试用例:
<!DOCTYPE html>
<html><head><title>No Underline Please</title>
<style type="text/css">
li { text-decoration:underline }
li .rule { text-decoration:none ! important }
</style>
</head><body>
<ol><li><span class="rule">RULE</span> CONTENT</li></ol>
</body></html>
我想在内容下划线而不是在规则下划线。但是，Chrome、FF 和 IE9 都强调 RULE。据推测，这是符合标准的行为，因为他们都同意。
- 我忘记了什么规范阻止我覆盖
text-decoration？ - 我怎样才能达到我想要的结果？
在这里 fiddle :http://jsfiddle.net/F3Grr/
最佳答案
整个 li 元素都带有下划线。正在呈现 li.rule 规则，但下划线适用于整个列表项。
您应该将要加下划线的内容包裹在另一个内联元素中。这是一个例子:
<!DOCTYPE html>
<html><head><title>No Underline! You're welcome.</title>
<style type="text/css">
li span.emphasis { text-decoration:underline; }
</style>
</head><body>
<ol><li>RULE <span class="emphasis">CONTENT</span></li></ol>
</body></html>
关于html - 防止父下划线在子元素下划线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7851380/