我如何让这个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:

我的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;
}

And my HTML looks like this:

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

Yet it comes up like this:

但结果是这样的:

5 个解决方案

#1

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.

文本装饰与其他字体/文本相关的样式(比如字体)不一样。应用文本修饰也会影响所有嵌套元素。

Check this out: http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

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

Excerpt:

摘录:

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.

内联框上的文本装饰被画在整个元素上，穿过任何后代元素而不注意它们的存在。“文本装饰”属性对后代元素的装饰没有任何影响…一些用户代理通过将装饰传播到后代元素来实现文本装饰，而不是简单地通过上面描述的元素来绘制装饰。CSS2中较为宽松的措辞可能允许这种说法。

I've got the info from: http://csscreator.com/node/14951

我从http://csscreator.com/node/14951得到了这个信息

#2

You get rid of text-decoration applied to a parent element in those cases:

在这些情况下，您可以删除应用于父元素的文本修饰:

• Out-of-flow elements, such as floated and absolutely positioned ones

  流外元素，如浮动和绝对定位的元素

  li {
    float: left; /* Avoid text-decoration propagation from ul */
    clear: both; /* One li per line */
  }
  ul { overflow: hidden; } /* Clearfix */
  

  ul {
    overflow: hidden; /* Clearfix */
  }
  li {
    float: left; /* Avoid text-decoration propagation from ul */
    clear: both; /* One li per line */
  }
  li.u {
    text-decoration: underline;
  }

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

• Atomic inline-level elements, such as inline blocks and inline tables

  原子内行级元素，如内联块和内联表

  But if you use li{display:inline-block}, then you don't have bullets (you lose display:list-item) and the items appear one next to the others.

  但是如果你使用的是li{display:inline-block}，那么你就没有子弹(你失去了显示:列表项)，而这些项就会出现在其他人旁边。

  Then, to have one item per line, you can use

  然后，要每行有一个条目，可以使用

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  

  And to add the bullets, you can use ::before pseudo-elements. However, bullets shouldn't be underlined, so you will need to take them out-of-flow or make them atomic inline-level too.

  要添加这些项目符号，可以使用:before伪元素。但是，不应该在横线上划线，因此需要将它们放在流外，或者将它们设置为原子内部级别。

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  li:before {
    content: '• ';         /* Insert bullet */
    display: inline-block; /* Avoid text-decoration propagation from li */
    white-space: pre-wrap; /* Don't collapse the whitespace */
  }
  li.u {
    text-decoration: underline;
  }

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

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  li:before {
    content: '•';          /* Insert bullet */
    position: absolute;    /* Avoid text-decoration propagation from li */
    margin-left: -.75em;
  }
  li.u {
    text-decoration: underline;
  }

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

---

This behavior is specified in CSS 2.1 and CSS Text Decoration Module Level 3:

此行为在CSS 2.1和CSS文本修饰模块第3级中被指定:

Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

注意，文本修饰不会传播到任何流外子代，也不会传播到原子内行级子代(如内联块和内联表)的内容。

#3

The reason you´re seeing what you're seeing is that your rule

原因你´看到你所看到的是你的规则

ul > li.u

takes preference over:

采用优先:

ul > li > ul > li

as a class is specified and that has more weight than the element selectors together.

当一个类被指定时，它的权重比元素选择器加在一起的权重更大。

Edit: What you could try is:

编辑:你可以尝试的是:

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

and play around with that (perhaps you will have to use li.u instead of just .u).

玩这个(也许你得用李。u而不仅仅是。u)

However, depending on the content you might want to wrap the underlined parts in q, em or strong tags and style these tags instead of using a class. That way you would be describing your content as well as styling it.

但是，根据内容的不同，您可能希望将带下划线的部分封装到q、em或强标记中，并对这些标记进行样式化，而不是使用类。这样，您不仅可以描述内容，还可以对其进行样式化。

#4

o.k.w.'s answer above explains perfectly why you can't do what you are asking without some other changes. No, you're not going mad!

o.k.w。上面的回答很好地解释了为什么你不能在没有其他改变的情况下完成你的要求。不，你不会疯的!

Possible workarounds:

可能的解决方法:

• try border-bottom?
• 试试边界底部?
• wrap the text you want underlined in a span class="u" tag? (to prevent the text-decoration from decorating nested elements)
• 在span类="u"标签中包装要下划线的文本?(防止文本装饰对嵌套元素的装饰)
• if you aren't able to change the markup, you could add some scripting to accomplish the same as my previous suggestion.
• 如果您不能更改标记，您可以添加一些脚本以完成与我之前的建议相同的脚本。

Best of luck!

最好的运气!

#5

.u {text-decoration: underline;}