如何在指定div结构中选中对应序号的li元素？CSS选择器实现li高亮咨询

针对当前DOM结构的解决方案 #

你提供的HTML结构中每个.layer节点下仅包含1个<li>，要选中对应序号的<li>，本质是选中对应排序的.layer下的<li>元素，序号从1开始计数：

• 选中第一个<li>（实现黄色高亮效果），使用以下选择器即可：

.container .layer:nth-child(1) ul li {
  background-color: yellow !important;
}

你现有代码中写的nth-of-type(2)是匹配第二个.layer节点，所以只会命中内容为「2」的<li>，将数字修改为1即可命中第一个元素。

不同匹配需求的选择器说明 #

• 匹配任意第N个.layer对应的<li>：将nth-child(1)中的数字替换为对应序号即可，比如匹配第3个就写nth-child(3)
• 如果是单个<ul>下有多个<li>，要选中指定序号的<li>，直接对<li>使用伪类即可：

/* 选中ul下的第2个li */
ul li:nth-child(2) {
  /* 自定义样式 */
}

常用序号匹配伪类区别 #

• :first-child：匹配父元素下的第一个子元素，等效于nth-child(1)
• :nth-child(n)：匹配父元素下第n个子元素，不区分子元素的标签类型
• :nth-of-type(n)：匹配父元素下相同标签类型的第n个子元素，父元素下有多种标签混排时使用更精准

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