如何跳過第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;
}