html - 如何让这个 CSS 文本装饰覆盖工作？

Question

有时候我发誓我要疯了。这是那些日子之一。我认为我的 CSS 在这里相当简单，但它似乎不起作用。我错过了什么？

我的 CSS 看起来像这样:

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

我的 HTML 看起来像这样:

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

然而它是这样出现的:

Answer 1

text-decoration 与 font-weight 等其他字体/文本相关样式的行为不同。应用 text-decoration 也会影响所有嵌套元素。

检查一下: http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

摘录:

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence. The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the element
. . . .
Some user agents have implemented text-decoration by propagating the decoration to the descendant elements as opposed to simply drawing the decoration through the elements as described above. This was arguably allowed by the looser wording in CSS2.

我从以下位置获得信息:http://csscreator.com/node/14951