Question

考虑到这个简化的测试用例：

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

我想强调内容但不强调RULE。但是，Chrome，FF和IE9都强调了RULE。可能这是符合标准的行为，因为他们都同意。

我忘记了什么规格阻止我覆盖text-decoration？
我如何达到我想要的效果？

在这里小提琴：http://jsfiddle.net/F3Grr/

Answer 1

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

防止父下划线强调子元素

1 个答案: