我如何让这个 CSS 文本装饰覆盖工作? [英] How do I get this CSS text-decoration override to work?

问题描述

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

Some days I swear I'm going mad. This is one of those days. I thought my CSS was fairly straight-forward here, but it just doesn't seem to be working. What am I missing?

我的 CSS 看起来像这样:

My CSS looks like this:

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 如下所示:

And my HTML looks like this:

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

结果是这样的:

推荐答案

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

text-decoration does not behave the same as other font/text related styling like font-weight. Applying text-decoration will affect all nested elements as well.

看看这个:http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

摘录:

内联框上的文字装饰是绘制在整个元素上，去跨越任何后代元素而没有对他们的任何关注在场.文字装饰"后代元素的属性不能对装修有什么影响元素
....
一些用户代理已经实现了文本装饰将装饰传播到后代元素而不是简单地绘制装饰如上所述的元素.这个可以说是宽松者允许的CSS2 中的措辞.

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

这篇关于我如何让这个 CSS 文本装饰覆盖工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！