CSS给列表第一项设置样式的方法有多种，以下是几种常见且有效的实现方式：1.使用:first-child伪类ulli:first-child{color:red;font-weight:bold;}说明：:first-child选择器会选择第一个子元素。适用于直接子元素是<li>的情况。2.使用:first-of-type伪类（更安全）ulli:first-of-type{color:

• 检查 DOM 结构：用浏览器开发者工具看 ul 下第一个子节点是不是你预期的 li
• 如果前面有注释（）或换行产生的空白文本节点，:first-child 就会失效
• :first-of-type 更鲁棒：它只关心「同类型元素中的第一个」，忽略其他类型节点

:first-of-type 是更安全的选择

对标准无干扰的列表结构，:first-of-type 行为更符合直觉。它不依赖兄弟节点类型，只要当前元素是其标签类型在父容器中首次出现，就命中。

ul li:first-of-type {
  font-weight: bold;
  background-color: #f0f8ff;
}

• 适用于 ul / ol / dl 等任何含 li 或 dt/dd 的上下文
• 兼容性好：IE9+ 都支持，和 :first-child 一致
• 注意：如果父容器里还有别的 li（比如嵌套列表里的），它仍只选最外层第一个

需要精确控制「可视第一行」时怎么办

当列表被 JS 动态渲染、或 CSS 用 display: none / visibility: hidden 隐藏了部分项，:first-of-type 和 :first-child 都无法感知「可见性」。这时必须靠 JS 或预处理逻辑。

• 纯 CSS 无解：选择器无法判断是否可见
• 可行替代：ul li:not([hidden]):not(.hidden):first-of-type（前提是隐藏是通过属性或 class 控制）
• 更可靠方式：JS 动态加类，例如

  document.querySelector('ul li:not(.hidden)')?.classList.add('first-visible');

别忽略 :nth-child(1) 和 :nth-of-type(1)的区别

这两个看似等价，但行为不同：:nth-child(1) 和 :first-child 完全等效；而 :nth-of-type(1) 和 :first-of-type 等效。关键在于「child」数所有子节点，「of-type」只数同标签节点。

• 写 li:nth-child(1) 和 li:first-child 效果一样，都容易被注释/文本节点打断
• 写 li:nth-of-type(1) 就等同于 li:first-of-type，推荐后者，语义更清晰
• 不要用 li:nth-child(1n) 这种冗余写法，既慢又难读

真正卡住的时候，往往不是选择器写错了，而是 DOM 结构比想象中更“松散”——多一行换行、一个未闭合标签、一段服务端注入的空格，都可能让 :first-child 失效。先看结构，再调样式。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~