如何为kramdown中单个嵌套列表项的开头添加样式且不影响嵌套列表？

1. Kramdown技巧：无默认样式的自定义内联元素 #

你可以利用kramdown的**内联属性列表（Inline Attribute Lists）**配合尖括号包裹文本的方式，实现不带默认样式的自定义span效果，完全不用写显式的<span>标签：

* <我要在此处添加样式>{: .my-class}
* 而非此处
* 或此处

这段代码会被kramdown编译成：

<ul>
  <li><span class="my-class">我要在此处添加样式</span></li>
  <li>而非此处</li>
  <li>或此处</li>
</ul>

这种写法既满足了给列表项开头文本添加样式的需求，又不会引入*、_或反引号带来的斜体、加粗或代码样式，写法简洁且符合kramdown的语法规范。

2. CSS技巧：仅给无嵌套列表的列表项内容加样式 #

如果不想依赖kramdown的语法特性，纯CSS也能精准实现需求，这里提供两种可行方案：

方案A：利用:not()和::first-line（适合整行样式） #

如果你的样式是针对列表项的第一行文本（正好是需要加样式的部分），可以结合:not()排除包含嵌套列表的li，再用::first-line选中第一行：

li:not(:has(ul, ol))::first-line {
  color: #ff4500;
  font-weight: bold;
  /* 自定义你的样式规则 */
}

方案B：精准定位文本节点（更灵活） #

若需要更精准地选中li内的第一个文本节点，可通过:has()伪类排除有嵌套列表的li，再单独设置文本样式：

/* 仅给无嵌套列表的li设置文本样式 */
li:not(:has(ul, ol)) {
  color: #2e8b57;
  font-style: italic;
}
/* 重置li内首个内联元素的样式，避免继承 */
li:not(:has(ul, ol)) > *:first-child {
  color: inherit;
  font-style: normal;
}

如果需要兼容不支持:has()的旧版浏览器，可以用简单的JS辅助：遍历所有li，给不含嵌套ul/ol的元素添加自定义类（比如.no-nested），再用该类设置样式即可。

内容的提问来源于stack exchange，提问作者Zack