Css 排除特定元素的目标元素

发布于06月09日

我有一个由div列表组成的两列表格，我想要target all the divs on the right列.使用:nth-of-type(Even)在我的例子中不起作用，因为我有一些跨越target all the divs on the right%宽度的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
}

我try 了相邻的和sibling 的 Select 器，加上::Not()、::Last-of-type和::First-of-type的组合

事先感谢您的帮助

推荐答案

您可以try 新的nth-child() Select 器，方法是从所选内容中排除全宽项目

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