如何用CSS选择并显示第一个CurrentYear类之前的最后3个元素

核心思路：利用CSS :has() 选择器（支持向前判断兄弟元素状态）配合:nth-child的of过滤语法，动态匹配首个.CurrentYear元素之前的最后3个非CurrentYear的.eaKeyDate元素，不需要固定前置元素数量。

完整实现代码 #

.eaKeyDate {
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: solid 1px #ccc;
  display: none;
}

/* 所有CurrentYear元素强制显示 */
.eaKeyDate.CurrentYear {
  background-color: red !important;
  color: white !important;
  display: block !important;
}

/* 匹配首个CurrentYear之前的最后3个非CurrentYear元素 */
.eaKeyDate:not(.CurrentYear):has(~ .eaKeyDate.CurrentYear:nth-of-type(1)):nth-last-child(-n+3 of :not(.CurrentYear)) {
  background-color: green;
  color: white;
  display: block;
}

<div class="eaKeyDate">1</div>
<div class="eaKeyDate">2</div>
<div class="eaKeyDate">3</div>
<div class="eaKeyDate">4</div>
<div class="eaKeyDate">5</div>
<div class="eaKeyDate">6</div>
<div class="eaKeyDate">7</div>
<div class="eaKeyDate">8</div>
<div class="eaKeyDate">9</div>
<div class="eaKeyDate">10</div>
<div class="eaKeyDate">11</div>
<div class="eaKeyDate CurrentYear">12</div>
<div class="eaKeyDate CurrentYear">1</div>
<div class="eaKeyDate CurrentYear">2</div>
<div class="eaKeyDate CurrentYear">3</div>
<div class="eaKeyDate CurrentYear">4</div>
<div class="eaKeyDate CurrentYear">5</div>
<div class="eaKeyDate CurrentYear">6</div>
<div class="eaKeyDate CurrentYear">7</div>
<div class="eaKeyDate CurrentYear">8</div>
<div class="eaKeyDate CurrentYear">9</div>
<div class="eaKeyDate CurrentYear">10</div>
<div class="eaKeyDate CurrentYear">11</div>

兼容性说明 #

• 该方案依赖CSS :has() 选择器以及:nth-child的of过滤语法，支持情况为 Chrome 105+、Safari 15.4+、Firefox 121+，可覆盖95%以上的全球用户流量
• 若需要兼容不支持上述特性的老旧浏览器，纯CSS没有可行实现方案，只能通过JS动态计算元素位置实现需求

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