css - 如何仅在嵌套列表中的最前面的元素下划线？

Question

考虑以下代码:

<ol class=top>
  <li>Top item

    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

和CSS:

.top > li {
  text-decoration: underline;
}

.top ol li {
  text-decoration: none;
}

fiddle :http://jsfiddle.net/fLvns1z0/1/

我只想给“Top item”加下划线，但整个文本都加了下划线。甚至 !important 也无济于事。有什么想法可以让它发挥作用并使代码尽可能简单吗？

Answer 1

如果您不想添加额外的 span 或任何其他元素来实现其他人所说的结果，您可以使用 css :first-line sudo类，检查下面的工作示例:

.top > li:first-line {
  text-decoration: underline;
}

<ol class="top">
  <li>Top item
    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>