当最后元素设display:none时，CSS :last-child选择器失效求助

问题说明 #

需要为未设置display:none的最后一个.abc元素应用样式，当前使用的选择器.abc:not([style="display:none"]):last-child存在缺陷：

• 当第一个.abc元素设为display:none时，选择器正常生效
• 当最后一个.abc元素设为display:none时，选择器完全失效

原因剖析 #

:last-child伪类仅匹配父元素的最后一个子元素，与元素是否可见无关。当父元素的最后一个子元素是带有style="display:none"的.abc时，前面未隐藏的.abc并不是父元素的最后一个子元素，因此:last-child无法命中它，导致整个选择器失效。

解决方案 #

方案1：使用:has()伪类（适配现代浏览器） #

通过:has()检测父元素的最后一个子元素是否为隐藏的.abc，针对性选中目标元素：

/* 处理最后一个子元素是隐藏.abc的情况 */
div:has(.abc[style="display:none"]:last-child) .abc:not([style="display:none"]):last-child {
  font-size: 100px;
}

/* 保留原选择器，处理最后一个子元素未隐藏的情况 */
.abc:not([style="display:none"]):last-child {
  font-size: 100px;
}

方案2：用类替代内联style（推荐，符合结构样式分离原则） #

避免用内联style控制隐藏，改用类标记，选择器逻辑更清晰：

/* 定义隐藏类 */
.hidden {
  display: none;
}

/* 选中最后一个未被隐藏的.abc元素 */
.abc:not(.hidden):last-of-type {
  font-size: 100px;
}

对应的HTML修改（同时修复重复id的规范问题）：

<div>
  <div id="box1" class="abc">Hello, World!</div>
  <div id="box2" class="abc">Hello, World!11212</div>
  <div class="abc hidden">Real Time CSS Editor</div>
</div>

完整可运行代码（方案2） #

div {
  width: 200px;
  height: 125px;
  padding: 10px;
  background-color: red;
  border: 1px solid black;
}

#box1, #box2 {
  transform: rotate(30deg);
  -ms-transform: rotate(30deg); /* IE 9 */
  -moz-transform: rotate(30deg); /* Firefox */
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
  -o-transform: rotate(30deg); /* Opera */
  background-color: yellow;
}

.hidden {
  display: none;
}

.abc:not(.hidden):last-of-type {
  font-size: 100px;
}

<div>
  <div id="box1" class="abc">Hello, World!</div>
  <div id="box2" class="abc">Hello, World!11212</div>
  <div class="abc hidden">Real Time CSS Editor</div>
</div>

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