如何跳过第n个子元素？

Question

我想跳过对带有：not属性的nth-child中的一个元素的计数，但是它不起作用或者甚至无法执行。 还有其他方法吗？

这是代码：

 .layout { float: left; width: 100px; height: 60px; border: 2px solid red; margin-right: 10px; margin-bottom: 10px; } .hidden { display: none; } .layout:not(.hidden):nth-child(2n+1) { clear: both; } 

 <div class="layout"></div> <div class="layout"></div> <div class="layout hidden"></div> <div class="layout"></div> <div class="layout"></div> <div class="layout"></div> <div class="layout"></div> <div class="layout"></div> 

即使类.hidden的元素不可见，仍将其计为nth-child

Answer 1

我认为:nth-child不能应用于:not的评估结果。 但我建议您先行一步以达到相同的效果：

1. 将“布局” DIV包装在container DIV中：

  <div id="container"> <div class="layout"></div> <div class="layout"></div> <div class="layout hidden"></div> <div class="layout"></div> </div> 

2. CSS：

 .layout { /*float: left;*/ display: inline-table; width: 100px; height: 60px; border: 2px solid red; margin-right: 10px; margin-bottom: 10px; } div#container { width: 232px; /* See the note below */ } div.layout:first-child { display: block; clear: both; } .hidden { display: none; } /* .layout:not(.hidden):nth-child(2n+1) { clear: both; } */ 

为了精确计算容器的确切宽度，您应该首先去除layout DIV之间的换行符，因为它们在渲染时会添加任意数量的空间。

Answer 2

的HTML

<div class="content">
<div class="layout"></div>
<div class="layout"></div>
<div class="layout hidden"></div>
<div class="layout"></div>
<div class="layout"></div>
<div class="layout"></div>
<div class="layout"></div>
<div class="layout"></div>
</div>

的CSS

.content{
  display: flex;
  flex-wrap: wrap;
  width: 224px
}
.layout {
  width: 100px;
  height: 60px;
  border: 2px solid red;
  margin-right: 10px;
  margin-bottom: 10px;
  flex: 1 0 30%;
}

.hidden {
  display:none;
}