如何在nth-child中跳过元素？:not属性失效的替代方案

:nth-child(2n+1) 是基于父容器中所有子元素的位置来选择的，不管元素有没有.hidden类、是否被隐藏。所以你的选择器 .layout:not(.hidden):nth-child(2n+1) 的逻辑是：先挑出父元素里第1、3、5...位的子元素，再从中过滤掉带.hidden类的——这和你想要的「跳过隐藏元素，只对可见的.layout计数」完全不是一回事。

举个例子：如果第三个子元素是.hidden，那第四个元素是父元素的第4位，2n+1不会选中它，但它其实是第二个可见元素，下一个可见元素（第五位）才需要clear: both，但你的选择器会选中第五位（因为是第5位，符合2n+1），但此时前面的第四个元素是可见的，第五位清浮动就会换行，这就错了。

方案1：改用CSS Grid（推荐，最简洁） #

如果可以放弃float布局，用CSS Grid是最优解——Grid会自动忽略display: none的元素，直接按可见元素排列，完全不需要手动处理清浮动：

/* 给父容器加Grid布局 */
.layout-container {
  display: grid;
  grid-template-columns: repeat(2, 100px); /* 每行固定2个元素 */
  gap: 10px; /* 用gap替代margin，更整洁 */
}

.layout {
  width: 100px;
  height: 60px;
  border: 2px solid red;
}

.hidden {
  display: none;
}

不管中间插入多少个.hidden元素，Grid都会自动把可见的.layout排成每行2个，完美符合需求。

方案2：JavaScript动态控制（适配float布局） #

如果必须保留float布局，用JS给可见的.layout元素动态添加清浮动的类是最可靠的方式：

// 定义一个函数来更新清浮动的类
function updateClearLayouts() {
  // 获取所有可见的.layout元素
  const visibleItems = document.querySelectorAll('.layout:not(.hidden)');
  
  visibleItems.forEach((item, index) => {
    // 索引从0开始，所以奇数位置的可见元素（第1、3、5...个）需要清浮动
    if (index % 2 === 0) {
      item.classList.add('clear-row');
    } else {
      item.classList.remove('clear-row');
    }
  });
}

// 页面加载时执行一次
updateClearLayouts();

// 如果有动态显示/隐藏元素的操作，在操作后重新执行这个函数
// 比如：document.querySelector('.toggle-btn').addEventListener('click', updateClearLayouts);

对应的CSS：

.layout {
  float: left;
  width: 100px;
  height: 60px;
  border: 2px solid red;
  margin-right: 10px;
  margin-bottom: 10px;
}

.hidden {
  display: none;
}

.clear-row {
  clear: both;
}

方案3：相邻兄弟选择器（局限性大，不推荐） #

如果你的隐藏元素位置固定，或者元素数量很少，可以用相邻兄弟选择器硬写规则，但这种方法扩展性极差，元素多了就没法维护：

/* 选中前面有两个可见.layout的可见.layout，给它清浮动 */
.layout:not(.hidden) + .layout:not(.hidden) + .layout:not(.hidden) {
  clear: both;
}
/* 如果有更多元素，还要继续加：.layout:not(.hidden) + ... + .layout:not(.hidden) { clear: both; } */

优先推荐用CSS Grid，它是现代布局的标准，代码简洁且不需要额外逻辑；如果必须兼容旧布局，JavaScript动态控制是最灵活可靠的方案。

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