日历DATE RANGE模块START/END DATE的CSS first-child样式失效咨询

嘿，我完全懂你碰到的这个坑——用first-child和last-child没效果，大概率是因为这俩选择器是针对父元素的直接子元素，而不是你选中的日期集合里的第一个/最后一个。咱们一步步来搞定它：

先理清核心问题 #

first-child只会匹配父元素的第一个子元素，如果你的选中日期所在的<td>前面还有其他未选中的<td>（比如一周起始是周日，但你选的起始日期是周二），那first-child根本不会命中你的目标元素。last-child也是同理。

方案1：用选中日期的共同类+first-of-type/last-of-type #

假设你的日历给所有选中日期的<td>（或其内部元素）加了统一类，比如.selected-date，那可以用下面的选择器精准定位范围首尾：

/* 标记日期范围的起始日期 */
.selected-rows .selected-date:first-of-type {
  background-color: #ff6b6b; /* 示例：红色背景突出起始 */
  border-radius: 50% 0 0 50%; /* 可选：给起始日期加左圆角 */
}

/* 标记日期范围的结束日期 */
.selected-rows .selected-date:last-of-type {
  background-color: #4ecdc4; /* 示例：青色背景突出结束 */
  border-radius: 0 50% 50% 0; /* 可选：给结束日期加右圆角 */
}

方案2：针对跨多行的日期范围 #

如果你的日期范围跨了多行（比如从周一选到下周三），首尾日期可能分别在第一行末尾和最后一行开头，这时候可以拆分选择：

/* 第一行选中行里的最后一个选中日期（起始） */
.selected-rows:first-child .selected-date:last-child {
  background-color: #ff6b6b;
  border-radius: 0 50% 50% 0;
}

/* 最后一行选中行里的第一个选中日期（结束） */
.selected-rows:last-child .selected-date:first-child {
  background-color: #4ecdc4;
  border-radius: 50% 0 0 50%;
}

/* 中间的选中日期保持统一样式 */
.selected-rows .selected-date:not(:first-of-type):not(:last-of-type) {
  background-color: #f7f7f7;
}

关键小技巧：用开发者工具确认DOM结构 #

按F12打开浏览器开发者工具，定位到选中的日期元素，检查这几点：

• <td>是不是直接在.selected-rows下的<tr>里？有没有额外嵌套的<div>之类的元素？
• 日历组件有没有给首尾日期自带特殊类（比如.range-start/.range-end）？如果有的话，直接用这些类会更省心！

比如要是发现组件自带了.range-start类，那直接写：

.range-start { /* 你的起始日期样式 */ }
.range-end { /* 你的结束日期样式 */ }

这样就不用自己折腾选择器啦！

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