我有一個由div列表組成的2列表,我想將右側的所有div作為目標。使用:n-of-type(even)在我的例子中不起作用,因為我有一些跨越100%寬度的div,所以它們改變了級聯順序。下圖顯示了所需的結果:
<section class="container">
<div>#1</div>
<div>#2</div>
<div class="fullWidth">#3</div>
<div>#4</div>
<div>#5</div>
<div>#6</div>
<div>#7</div>
<div class="fullWidth">#8</div>
<div>#9</div>
<div>#10</div>
</section>
.container {
width: 300px;
height: 400px;
margin: 20px;
outline: 2px solid lightgrey;
display: flex;
flex-wrap: wrap;
}
.container > div {
flex: 1 1 50%;
outline: 1px solid bisque;
background-color: #c5c8d5;
}
div.fullWidth {
width:100%;
flex-basis: 100%;
background-color: lightsalmon
}
我已經嘗試了相鄰和兄弟選擇器,加上::not()、::last-of-type和::first-of-type的組合
預先感謝任何幫助
# # #您可以通過從選擇中排除全角項目來嘗試新的n-child()選擇器
.container {
width: 300px;
height: 400px;
margin: 20px;
outline: 2px solid lightgrey;
display: flex;
flex-wrap: wrap;
}
.container > div {
flex: 1 1 50%;
outline: 1px solid bisque;
background-color: #c5c8d5;
}
div.fullWidth {
width:100%;
flex-basis: 100%;
background-color: lightsalmon
}
.container > div:nth-child(even of :not(.fullWidth)) {
background: red;
}
<section class="container">
<div>#1</div>
<div>#2</div>
<div class="fullWidth">#3</div>
<div>#4</div>
<div>#5</div>
<div>#6</div>
<div>#7</div>
<div class="fullWidth">#8</div>
<div>#9</div>
<div>#10</div>
</section>