如何为元素组合的nth-child添加样式？日历日期范围高亮实现

在PrimeNG日历组件中选择日期范围时，需求是将选中的首尾日期高亮为深绿色，中间日期高亮为浅绿色，但直接使用:first-child或:last-child伪类无法正确选中首尾元素——因为每个选中的日期都位于独立的<td>父容器内，这些伪类会匹配所有选中的日期（每个都是其父元素的唯一子元素），导致所有选中日期都变成深绿色。

解决方法 #

PrimeNG的日期范围选择功能会自动给起始日期添加p-datepicker-range-start类，结束日期添加p-datepicker-range-end类，我们可以利用这两个专属类来精准定位首尾日期，再通过排除这两个类来设置中间日期的样式：

/* 中间选中日期设置为浅绿色 */
.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-highlight:not(.p-datepicker-range-start):not(.p-datepicker-range-end) {
    background-color: lightgreen;
}

/* 首尾选中日期设置为深绿色 */
.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-datepicker-range-start,
.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-datepicker-range-end {
    background-color: green;
}

原理说明 #

• 原代码的问题在于:first-child/:last-child是基于父元素的子元素位置判断的，而选中的日期分散在不同的<td>中，每个<span.p-highlight>都是其父<td>的唯一子元素，因此所有选中日期都会被匹配到，无法区分首尾。
• 借助PrimeNG自带的范围首尾类，我们可以直接精准定位目标元素，无需依赖子元素位置伪类，完美实现需求样式。

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