如何根据section类容器内doc类元素的数量调整dum类元素的CSS样式

要实现你描述的需求——当.section类容器中的.doc类元素数量≥2个时，调整所有.dum类元素的样式，且第一个.dum与后续.dum样式不同，下面是完整的解决方案：

核心CSS代码 #

/* 基础样式：当.doc数量不足2个时，所有.dum的默认样式 */
.section .doc .dum {
  color: red;
  pointer-events: none;
  opacity: .3;
}

/* 当.doc数量≥2个时，覆盖样式：第一个.doc的.dum保留特殊样式，后续的恢复正常交互 */
.section .doc:nth-last-of-type(n + 2), 
.section .doc:nth-last-of-type(n + 2) ~ .doc .dum {
  opacity: 1;
  cursor: pointer;
  pointer-events: all;
}

示例HTML结构 #

<!-- 第一个section：包含2个.doc，会触发差异化样式 -->
<div class="section">
  <div class="doc">
    <div class="dum">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="doc">
    <div class="dum">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>
<hr>
<!-- 第二个section：仅1个.doc，保持基础样式 -->
<div class="section">
  <div class="doc">
    <div class="dum">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>

代码逻辑拆解 #

• 基础样式规则：先给所有.section下的.dum设置统一的默认样式（红色文字、半透明、不可交互），这个样式会在.doc数量不足2个时直接生效。
• 数量判断与样式覆盖：
  • .section .doc:nth-last-of-type(n + 2)：这个选择器的作用是匹配.section中至少存在2个.doc时的第一个.doc（:nth-last-of-type(n+2)表示从倒数第2个位置往前的所有元素，当元素数量≥2时，第一个元素会被选中）。
  • .section .doc:nth-last-of-type(n + 2) ~ .doc .dum：通过兄弟选择器~，选中第一个.doc之后的所有.doc下的.dum，给它们设置可交互、完全不透明的样式，和第一个.dum形成明显区分。

这样就能精准实现需求：当.doc数量≥2时，第一个.dum保持半透明不可交互，后续的.dum恢复正常可点击状态；当.doc只有1个时，.dum维持基础的半透明不可交互样式。

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