如何用更简洁的CSS选择器实现：选中除最后子元素外的所有子元素，唯一子元素需被选中

嗨，我明白你的需求啦——现在你用了两个选择器来实现“选除最后一个外的所有子元素，同时唯一子元素必须被选中”的效果，想找更紧凑的写法对吧？

你当前的写法是把“唯一子元素”和“非最后子元素”拆成两个选择器用逗号分隔，其实我们可以用逻辑非的嵌套来把这两个条件合并成一个选择器，这样代码更简洁。

核心思路是反过来想：我们要排除的是「既是最后一个子元素，又不是唯一子元素」的元素，剩下的就是我们需要选中的目标。对应的完整CSS代码可以改成这样：

.parent { 
  margin: 10px; 
  padding: 5px; 
  border: 1px solid black; 
  width: 70px; 
} 
.parent > div { 
  position: relative; 
} 
/* 这里是简化后的核心选择器 */
.parent > div:not(:last-child:not(:only-child))::after { 
  content: ""; 
  display: block; 
  position: absolute; 
  right: 0px; 
  top: 7px; 
  width: 7px; 
  height: 7px; 
  margin-left: 5px; 
  background-color: blue; 
}

对应的HTML结构还是你原来的：

<div class="parent">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>
<div class="parent">
  <div>one</div>
</div>

这个简化后的选择器div:not(:last-child:not(:only-child))翻译成人话就是：不是那种「是最后一个子元素，但又不是唯一子元素」的元素，完美匹配你的需求：

• 当父元素有多个子元素时，最后一个子元素会被排除，其他子元素都会加上蓝色小方块；
• 当父元素只有一个子元素时，它虽然是最后一个，但同时也是唯一的，所以不会被排除，照样会加上蓝色小方块。

如果你觉得嵌套的:not有点绕，也可以用:nth-last-child(n+2), :only-child这个写法，不过它和你原来的代码长度差不多，反而嵌套:not的写法更紧凑，只需要一个选择器就搞定啦。

内容来源于stack exchange