如何跳过n-child中的元素？-Howtoskipanelementinnth-child?

0  

I don't think the :nth-child can be applied to the result of evaluation of :not. But I suggest you a walkaround to get the same effect:

我不认为：nth-​​child可以应用于评估结果：not。但我建议你走一走来获得同样的效果：

1. Wrap the "layout" DIVs within a container DIV:
2. 将“布局”DIV包装在容器DIV中：

2. CSS:
3. 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;
}
*/

To calculate accurately the container's exact width, you should first strip off the newlines between the layout DIVs, because they add an arbitrary amount of space when being rendered.

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

-1  

HTML

HTML

CSS

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;
}