提问人：Praveen RL 提问时间：11/14/2023 更新时间：11/16/2023 访问量：42
如何为第n个子元素的组合添加样式？
How to add style for combination of elements nth child?
问：
这与日历样式有关。当我们在日历中选择日期范围时，必须以深绿色突出显示第一个和最后一个日期，并且在日期之间应以浅绿色突出显示。但是不能使用 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;
}
答：
-1赞
Darigan
11/14/2023
#1
此选择器选择目标作为容器中的第一个和最后一个元素，而不是使用 and and:first-child:last-child:first-of-type:last-of-type
您可以使用这个小 JS 代码为代码中的第一个和最后一个子元素添加这些类：
const highlights = document.querySelectorAll('.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-highlight');
highlights[0].classList.add('first-date');
highlights[highlights.length - 1].classList.add('last-date');
我希望这项工作对你有用
评论
0赞
Praveen RL
11/14/2023
对不起，它不起作用
0赞
Darigan
11/14/2023
我能看到你们的HTML代码吗？
0赞
Praveen RL
11/14/2023
我无法分享它，但如果没有第 n 个孩子，浅绿色背景颜色就会起作用。但必须与第一个和最后一个日期区分开来
0赞
Darigan
11/16/2023
对不起，伙计，所以可能是因为你的span.p-highlight不完全在你的TD标签中，我希望上面的js代码对你有所帮助
上一个：元素的动态开放
评论