嵌套li（列表）项目的文本装饰[重复]答案

【问题标题】：Text decoration for nested li (list) items [duplicate]嵌套li（列表）项目的文本装饰[重复]
【发布时间】：2016-01-28 16:49:23
【问题描述】：

我嵌套了ul 和li。我为祖先li申请了text-decoration: underline;，并且这种风格进一步传递给后代li。为了从后代li 中删除应用样式，我使用了另一个text-decoration: none !important;，但它不起作用。我使用的选择器是正确的，如果我更改文本颜色，它就可以工作。

我的问题是：为什么 text-decoration: none; 不适用于嵌套的 li（青蛙、蟾蜍......）。我将不胜感激，并提供解释以了解原因。

ul li {
    text-decoration: underline;
}
ul li ul li {
    text-decoration: none !important;
    /* It is not working */
}

<ul>
  <li>Length: 15-20 inches</li>
  <li>Peak Breeding Activity: March-April</li>
  <li>Typical foods:
    <ul>
      <li>frogs</li>
      <li>toads</li>
      <li>salamanders</li>
      <li>earthworms</li>
      <li>minnows</li>
      <li>mice</li>
    </ul>
  </li>
</ul>

【问题讨论】：

继续阅读直到 post 结束，您会找到一些解决方法。
@Pangloss 我读了那篇文章。我现在明白text-decoration 是继承给嵌套元素的。但是建议的方法不起作用。我尝试将嵌套元素包装在 span 中，但仍然不乏。浮动有效，但我不想内联它。
我想最简单的方法是使用border-bottom。
@Pangloss 谢谢，现在知道了。

标签： html css html-lists

【解决方案1】：

ul > li 只会设置你的 ul 的直接子元素，而忽略嵌套的 li。将此 css 选择器用于您不想一直携带的项目。

【讨论】：

text-decoration: underline; 被继承到嵌套列表中。