色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

目標元素排除某些其他元素

錢斌斌2年前8瀏覽0評論

我有一個由div列表組成的2列表,我想將右側的所有div作為目標。使用:n-of-type(even)在我的例子中不起作用,因為我有一些跨越100%寬度的div,所以它們改變了級聯順序。下圖顯示了所需的結果:

enter image description here

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