嵌套li（列表）项目的文本修饰

Question

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

我的问题是：为什么text-decoration: none;不适用于嵌套li（青蛙，蟾蜍......）。我会理解答案并解释理解原因。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

ul > li只会为ul的直接子项设置样式并忽略嵌套的li。将此css选择器用于您不希望被一直携带的项目。