如何只给嵌套列表中的顶级项目加下划线？

How to underline only top-items in a nested list?

提问人：Stalinko 提问时间：7/16/2018 更新时间：7/16/2018 访问量：695

问：

请考虑以下代码：

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

小提琴：http://jsfiddle.net/fLvns1z0/1/

我只想给“首页”加下划线，而是给整个文本加下划线。甚至无济于事。 如何让它工作并保持代码尽可能简单的任何想法？!important

CSS HTML HTML 列表 嵌套列表

评论

0赞 Stalinko 7/16/2018
@Dimple，我试过了 - 不起作用。
1赞 Praveen Kumar Purushothaman 7/16/2018
哇。。。这太疯狂了。是的。。。:(
0赞 Turnip 7/16/2018
这似乎不合逻辑。如果有人知道具体情况，我很想知道原因。
0赞 Praveen Kumar Purushothaman 7/16/2018
@Turnip 看起来真的不可能： * 级联 <li> 中的文本修饰问题 * stackoverflow.com/questions/1823341
0赞 Turnip 7/16/2018
我收回我之前的评论。使用不同的示例确实有意义：jsfiddle.net/3rror404/ntLgkmap/1

答：

2赞 Praveen Kumar Purushothaman 7/16/2018 #1

看起来是因为标签的行为。如果可能的话，请添加一个，它应该没问题：<li><span>

.top span {
  text-decoration: underline;
}
<ol class=top>
  <li><span>Top item</span>
    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

此外，当您添加标签时，您显然是在分隔。另外，真正的原因是我无法以另一种方式修复。对不起。<span>:(

评论

0赞 Stalinko 7/16/2018
哈哈，这正是我在:)前一分钟想到的我的解决方法甚至更简单 - 我使用而不是 .但是，它使代码更脏，并且看起来并不绝对准确，因为仍然没有下划线。如果没有更好的答案，我会将其标记为解决方案。<u><span>1.
0赞 Praveen Kumar Purushothaman 7/16/2018
@Stalinko 看起来真的不可能： * 级联 <li> 中的文本修饰问题 * stackoverflow.com/questions/1823341
0赞 Praveen Kumar Purushothaman 7/16/2018
@Stalinko 否，因为它已被弃用。<u>:(
0赞 Stalinko 7/16/2018
W3c 表示它在 HTML4 中被弃用，但在 HTML5 中重新定义： w3schools.com/tags/tag_u.asp 此外，所有浏览器都正确支持它。
0赞 CertainPerformance 7/17/2018
@Stalinko w3schools（糟糕的教程网站）与万维网联盟不同。差异非常重要。如果你需要参考，最好避免使用w3schools，而是使用更值得信赖的东西，比如MDN。
2赞 Temani Afif 7/16/2018 #2

您可以使用与背景相同的颜色重新定义：text-decoration

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

.top ol li{
  text-decoration: underline;
  text-decoration-color: #fff;
}
<ol class=top>
  <li>Top item
    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

或者对元素的行为进行一些更改：

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

.top ol{
  display:inline-block;
  width:100%;
  box-sizing:border-box;
}
<ol class=top>
  <li>Top item
    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

评论

0赞 Praveen Kumar Purushothaman 7/16/2018
这是一个很好的技巧。我确实尝试过这个，但它对我不起作用。:(
0赞 Temani Afif 7/16/2018
@PraveenKumarPurushothaman我添加了另一个，您也可以尝试一下
0赞 Praveen Kumar Purushothaman 7/16/2018
哇......这也行得通。但问题出在.使用 和 ，那会很棒。marginspaddingborder-box
0赞 Praveen Kumar Purushothaman 7/16/2018
我们俩都修好了。大声笑。
5赞 Girisha C 7/16/2018 #3

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

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

上一个：ReactJS+MaterialUI v1 自动嵌套列表填充

下一个：将类添加到 4 级超级菜单的每个子菜单级别