如何选择页面中除首个实例外的所有.wp-block-column元素（无视父元素）

• 需求：将页面中所有class为wp-block-column的div设置为display:none;，但排除第一个实例，且不受父元素位置影响
• 当前问题：原有CSS选择器依赖父元素的:nth-child，当页面插入非seventy-thirty-block的前置元素时失效
• 补充说明：.menu-column仅存在于.seventy-thirty-block中，这类块由循环生成，数量不定；页面可能存在任意数量的非seventy-thirty-block前置元素
• 期望效果：仅显示第一个menu，其余menu隐藏，最终页面输出内容为：content、menu、content、content

现有代码 #

HTML代码 #

<div class="singleBlogContent">

  <div class="callout-full-block">
  </div> 

<!--   <div class="callout-full-block">
  </div>  -->
  
  <div class="seventy-thirty-block">
    <div class="container">
      <div class="seventy-thirty-columns">
        <div>
          <div>
            content
          </div>
        </div>
        <div class="wp-block-column">
          <div class="menu-column">
            menu
          </div>
        </div>
      </div>
    </div>  
  </div>

  <div class="seventy-thirty-block">
    <div class="container">
      <div class="seventy-thirty-columns">
        <div>
          <div>
            content
          </div>
        </div>
        <div class="wp-block-column">
          <div class="menu-column">
            menu
          </div>
        </div>
      </div>
    </div>  
  </div>


  <div class="seventy-thirty-block">
    <div class="container">
      <div class="seventy-thirty-columns">
        <div>
          <div>
            content
          </div>
        </div>
        <div class="wp-block-column">
          <div class="menu-column">
            menu
          </div>
        </div>
      </div>
    </div>  
  </div>

</div>

原有CSS代码 #

div.seventy-thirty-block:not(:nth-child(2)) .wp-block-column .menu-column {
    display:none;
}

解决方案 #

可以采用两种不依赖父元素位置的CSS写法：

方案一：先隐藏所有，再恢复第一个 #

/* 默认隐藏所有.seventy-thirty-block内的menu-column */
.seventy-thirty-block .wp-block-column .menu-column {
  display: none;
}
/* 单独恢复第一个.seventy-thirty-block内的menu-column */
.seventy-thirty-block:first-of-type .wp-block-column .menu-column {
  display: block;
}

原理：:first-of-type会匹配父元素下第一个带有.seventy-thirty-block类的div元素，不管前面有多少个非目标前置元素，都能准确选中第一个目标块。

方案二：直接隐藏第一个之后的所有 #

/* 选中第一个.seventy-thirty-block之后的所有同类型兄弟块，隐藏其内部的menu-column */
.seventy-thirty-block ~ .seventy-thirty-block .wp-block-column .menu-column {
  display: none;
}

原理：通用兄弟选择器~会匹配所有出现在第一个.seventy-thirty-block之后的同级别兄弟元素，不受前置非目标元素干扰，简洁高效。

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