关于Markdown嵌套二级无序列表下划线无法去除的问题咨询

嘿，我太懂你这种调了半天CSS却毫无效果的崩溃感了！先把你的问题场景理清楚：

你用的Markdown列表结构是这样的：

* list item (first ul first li)
  * list item (second ul first li)
  * list item (second ul second li)
  * list item (second ul third li)
* list item (first ul second li)
  * list item (second ul first li)
  * list item (second ul second li)

对应的CSS尝试了这些写法：

ul {
  font-variant: small-caps;
  text-decoration: underline;
}
ul ul {
  font-variant: normal;
  text-decoration: none;
}

你还试过ul ul { text-decoration: unset; }、ul ul { text-decoration: none !important; }这些变体，甚至在VS Code和多个在线Markdown平台都测试过，排除了编辑器或扩展的问题，但下划线就是去不掉。

先回答你的第一个问题：这既不是Markdown的设计特性，也不是bug，是CSS里text-decoration的特殊继承逻辑在搞鬼！

为啥会这样？因为text-decoration和普通CSS属性的继承规则不一样——当你给父级ul设置text-decoration: underline时，这个下划线样式其实是直接作用在父元素包含的所有文本节点上，而不是父元素本身。你给子级ul设置text-decoration: none根本没用，因为子级ul本身并没有下划线，下划线是父级已经“附着”在文本上的样式，子元素没法直接覆盖。

接下来给你两个靠谱的解决方法：

方法一：把下划线样式加到一级列表的li上（最推荐） #

把父级ul的样式转移到直接承载文本的li元素，这样就能精准控制每个层级的样式：

/* 仅给一级列表的li添加样式 */
ul > li {
  font-variant: small-caps;
  text-decoration: underline;
}
/* 重置二级列表li的样式 */
ul ul > li {
  font-variant: normal;
  text-decoration: none;
}

这个方法从根源上避免了样式穿透问题，因为每个层级的文本样式都直接作用在自己的li上，二级列表的text-decoration: none能完全覆盖掉。

方法二：用display: inline-block创建独立渲染上下文 #

如果一定要给ul设置样式，可以给子级ul加上display: inline-block，让它形成独立的渲染上下文，阻断父级文本装饰的穿透：

ul {
  font-variant: small-caps;
  text-decoration: underline;
}
ul ul {
  font-variant: normal;
  text-decoration: none;
  display: inline-block;
  width: 100%;
}

不过这个方法需要额外处理宽度，不如方法一简洁直观。

总结一下：这个问题和Markdown本身无关，是CSS的text-decoration特性导致的小坑，调整样式的作用对象就能完美解决！

内容来源于stack exchange