如何为第n个子元素的组合添加样式？

Question

这与日历样式有关。当我们在日历中选择日期范围时，必须以深绿色突出显示第一个和最后一个日期，而中间的日期应以浅绿色突出显示。但不可能使用 nth-child 选择第一个和最后一个元素

.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-highlight {
    background-color: lightgreen;
}
.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-highlight:first-child,
.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-highlight:last-child {
    background-color: green;
}

Answer 1

您可以使用

:first-child

和

:last-child

，而不是使用

:first-of-type

和

:last-of-type

，此选择器选择您的目标作为容器中的第一个和最后一个元素