为何:nth-child选择器在ID选择器上不生效？WordPress主题问题

首先明确：你的页面里存在多个ID为page-services的div，这违反了HTML ID唯一性的规范，这也是你之前用nth-child选择器失效的核心原因——浏览器只会优先识别第一个带有该ID的元素，后续重复ID的元素无法被ID选择器正确定位。

以下是无需修改主题ID的解决方案：

方案1：通过父容器定位（推荐，精准度高） #

先通过浏览器开发者工具找到这些#page-services元素的共同父容器（比如父容器的类是services-wrap，具体以你的页面结构为准），然后用父容器的子元素选择器定位第一个和最后一个目标div：

/* 设置父容器下第一个#page-services的背景为黑色 */
.services-wrap > #page-services:first-child {
  background-color: #000;
  /* 如果需要文字对比色，可添加 color: #fff; */
}

/* 设置父容器下最后一个#page-services的背景为黑色 */
.services-wrap > #page-services:last-child {
  background-color: #000;
}

方案2：使用类型选择器（无需找父容器） #

如果不方便定位父容器，可直接使用:first-of-type和:last-of-type选择器，基于元素在同级中的位置来匹配：

/* 选中同级中的第一个#page-services */
#page-services:first-of-type {
  background-color: #000;
}

/* 选中同级中的最后一个#page-services */
#page-services:last-of-type {
  background-color: #000;
}

为什么之前的代码无效？ #

你写的#page-services:nth-child(odd)只会匹配到第一个带有该ID的元素，因为浏览器不认可重复ID，后续的#page-services元素不会被ID选择器选中，自然无法应用样式。

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