相邻兄弟选择器失效：日历高亮日期右侧圆角无法生效的问题排查

问题描述 #

我需要在月视图日历中高亮日期区间，要求区间两端均为圆角样式。目前已实现左侧圆角效果，但右侧圆角始终无法生效，相关代码示例如下：

HTML代码 #

<div class="calendar">
    <ul class="weeks">
      <li>Sun</li>
      <li>Mon</li>
      <li>Tue</li>
      <li>Wed</li>
      <li>Thu</li>
      <li>Fri</li>
      <li>Sat</li>
    </ul>
    <ul class="days">
      <li class="inactive">26</li>
      <li class="inactive">27</li>
      <li class="inactive">28</li>
      <li class="inactive">29</li>
      <li class="inactive">30</li>
      <li class="inactive">31</li>
      <li>1</li>
      <li class="highlighted">2</li>
      <li class="highlighted">3</li>
      <li>4</li>
    </ul>
</div>

现有CSS代码 #

/* 区间第一个高亮元素的左侧圆角（正常生效） */
.days li:not(.highlighted) + li.highlighted {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* 尝试设置区间最后一个高亮元素的右侧圆角（未生效） */
.days li.highlighted + li:not(.highlighted) {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

问题原因 #

你写的右侧圆角选择器逻辑完全错误——li.highlighted + li:not(.highlighted)选中的是高亮元素后面紧邻的那个非高亮元素，而不是区间的最后一个高亮元素本身。把圆角样式加到了错误的元素上，自然看不到预期效果。

解决方法 #

要给最后一个高亮元素加右侧圆角，需要精准定位到这个元素本身。可以用CSS的:has()选择器（现代浏览器支持），或者结合:last-of-type做兼容处理，修改后的CSS如下：

/* 保留原有左侧圆角逻辑 */
.days li:not(.highlighted) + li.highlighted {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* 现代浏览器方案：选中后面跟着非高亮元素的高亮元素（即区间最后一个高亮项） */
.days li.highlighted:has(+ li:not(.highlighted)) {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* 兼容旧浏览器方案：处理高亮元素是列表最后一个子元素的情况 */
.days li.highlighted:last-of-type {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

说明 #

• :has(+ li:not(.highlighted))是核心：它能精准匹配后面紧邻着非高亮元素的高亮元素，也就是区间的末尾项，给它添加右侧圆角就会生效。
• 如果需要兼容不支持:has()的浏览器（比如旧版Chrome、Firefox），可以加上li.highlighted:last-of-type的规则，覆盖高亮元素是列表最后一项的场景。

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