使用 :first-child 或 :first-of-type 可选中列表首项;通过 class 或 id 能精准定位特定列表,如 .special-list li:first-child 设置首项加粗,而 li:first-of-type 避免其他标签干扰,确保选中第一个 li 元素。

要使用 CSS 选择器选中指定列表的首项,可以使用 :first-child 或 :nth-child(1) 伪类选择器。这些选择器能精准定位父元素下的第一个子元素。
选中任意列表的第一项
如果你想要选中某个列表(如 ul 或 ol)中的第一个 li 元素,可以这样写:
ul li:first-child {color: red;
}
这段代码会将所有无序列表中第一个列表项文字变为红色。
仅选中特定列表的第一项
如果页面中有多个列表,而你只想选中某一个特定的列表首项,建议给该列表添加一个 class 或 id。
立即学习“前端免费学习笔记(深入)”;
例如,给目标列表设置 class="special-list":
然后用以下 CSS 选中它的第一项:
.special-list li:first-child {font-weight: bold;
}
排除其他元素干扰:使用 :first-of-type
如果列表中除了 li 还有其他类型的元素(比如嵌套 div),而你只想选中第一个 li,可使用 :first-of-type:
ul li:first-of-type {background-color: yellow;
}
它会选择父元素下第一个类型为 li 的元素,不受其他标签影响。
基本上就这些。根据结构灵活选用 :first-child 或 :first-of-type 就能准确选中列表首项。不复杂但容易忽略细节。










