如何仅用CSS为首个列表首元素设置样式（不依赖ol标签/JS）

可以仅用CSS实现需求，先分析你之前选择器的问题：
你写的 div :has(li):nth-child(1) li 中，:nth-child(1) 选中的是 <div> 的第一个子元素 <h1>，而 <h1> 内部没有 <li>，所以这个选择器无法匹配到目标元素。

下面提供两种可行的方案：

方案一：使用:has选择器（更通用，不依赖列表类型） #

这个方案不需要指定列表是<ul>还是<ol>，只要是<div>中第一个包含<li>的子元素，就能选中它的第一个<li>：

div > *:has(li):first-of-type > li:first-child {
  /* 这里写你的样式，比如： */
  color: red;
  font-weight: bold;
}

解释：

• div > *:has(li)：匹配<div>的直接子元素中包含<li>的元素
• :first-of-type：选中这些元素里的第一个（也就是你的第一个列表）
• > li:first-child：选中这个列表的第一个<li>

方案二：不使用:has（兼容旧版浏览器） #

如果需要兼容不支持:has的旧浏览器，可以利用已知的HTML结构（<h1>之后的第一个列表）：

div > :nth-child(2) > li:first-child {
  /* 样式 */
  color: red;
  font-weight: bold;
}

解释：

• div > :nth-child(2)：选中<div>的第二个直接子元素（也就是你的<ul>）
• > li:first-child：选中这个列表的第一个<li>
  这个方案依赖<h1>是<div>的第一个子元素，但不依赖<ol>标签，符合你的要求。

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