如何选中页面中所有wp-block-column类元素，排除第一个并设置隐藏？

需要实现：将页面中所有class为wp-block-column的<div>设置为display:none;，但保留第一个实例。

当前使用的CSS选择器div.seventy-thirty-block:not(:nth-child(2)) .wp-block-column .menu-column存在局限性——它依赖父元素的子元素位置来匹配，一旦在.singleBlogContent内添加额外的.callout-full-block这类元素，选择器就会失效。

页面HTML结构包含多个循环生成的.seventy-thirty-block块，每个块内都有.wp-block-column元素；期望最终效果为：仅第一个.wp-block-column（对应menu）显示，其余同类元素（对应content）全部隐藏。

解决方案 #

使用全局范围的选择器来匹配除第一个外的所有.wp-block-column元素，无需依赖父元素结构，以下两种方法均可实现需求：

方法1：利用:not(:first-of-type)排除第一个实例 #

.wp-block-column:not(:first-of-type) {
  display: none;
}

方法2：利用:nth-of-type(n+2)直接选中第2个及以后的实例 #

.wp-block-column:nth-of-type(n+2) {
  display: none;
}

原理说明 #

• 这两个选择器均在全局文档范围内匹配.wp-block-column元素，不受父元素的结构变化（比如新增.callout-full-block）影响。
• :first-of-type会匹配文档中第一个出现的.wp-block-column元素，:not()伪类则排除它，选中剩余所有同类元素。
• :nth-of-type(n+2)直接从第2个元素开始匹配所有后续的.wp-block-column，效果与前者完全一致。

验证示例 #

假设包含额外元素的HTML结构如下：

<div class="singleBlogContent">
  <div class="callout-full-block">...</div>
  <div class="seventy-thirty-block">
    <div class="wp-block-column">menu（保留显示）</div>
  </div>
  <div class="seventy-thirty-block">
    <div class="wp-block-column">content（隐藏）</div>
  </div>
  <div class="seventy-thirty-block">
    <div class="wp-block-column">content（隐藏）</div>
  </div>
</div>

应用上述任意一种CSS后，仅第一个.wp-block-column会显示，其余全部被隐藏，完全符合需求。

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