Question

我想跳过计算nth-child中的元素：not attribute，但它不起作用或者甚至不可能。还有其他办法吗？

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

即使具有 .hidden 类的元素不可见，它仍然计入 nth-child

Answer 1

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

包裹＆＃34;布局＆＃34; container DIV中的DIV：

＆＃13;

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

＆＃13;

CSS：

＆＃13;

.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;
}
*/

＆＃13;

要准确计算容器的确切宽度，首先应删除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;
}

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

2 个答案: