带圆角的元素 - 如何检测特定元素以赋予它们特殊的样式？

Question

我有一种奇怪的布局 - 盒子应该有圆角，就好像它们是一个大元素一样（参见带有 4 个示例的图像）。问题是盒子是动态制作的，所以行和列可以变化。所以乐趣开始了。我开始给第一个和最后一个盒子一个圆角，在这个计数之后（第 n 次） - 但我无法理解如何用不同的行来做到这一点。尝试了诸如“tnh-last-child(3)”（如果最后一个“行”只有 2 个框则不起作用）或“nth-child(3n+1)”之类的所有方法，但是当我有超过 2 个时就会出现问题“行”（我的意思是没有“行”[会很棒] - 只有列）。有什么想法吗？

// First and last
&:first-of-type {
  border-top-left-radius: 30px;
}
&:last-of-type {
    border-bottom-right-radius: 30px;
}       
&:nth-of-type(3) {
    border-top-right-radius: 30px;
}

这是一个fiddle：https://codepen.io/herrfischer/pen/eYEyRQp

section {
     display: flex;
     flex-wrap: wrap;
     justify-content: left;
     width: 400px;
}
 section div {
     width: 30%;
     margin: 5px;
     height: 100px;
     background-color: grey;
}
 section div:first-of-type {
     border-top-left-radius: 30px;
}
 section div:last-of-type {
     border-bottom-right-radius: 30px;
}
 section div:nth-of-type(3) {
     border-top-right-radius: 30px;
}
 .red {
     background-color: red;
}

<h1>Red box should always have a rounded corner in the bottom left.</h1>

<h2>Example A</h2>
<section class="a">
    <div></div>
    <div></div>
    <div></div>
    <div class="red"></div>
    <div></div>
    <div></div>
</section>

<h2>Example B</h2>
<section class="b">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="red"></div>
    <div></div>
</section>

<h2>Example C</h2>
<section class="b">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="red"></div>
</section>

<h2>Example D</h2>
<section class="b">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="red"></div>
    <div></div>
    <div></div>
</section>

Answer 1

您可以组合 nth-child 个选择器。这将只匹配一项。

&:nth-child(3n + 1):nth-last-child(3),
&:nth-child(3n + 1):nth-last-child(2),
&:nth-child(3n + 1):last-child {
  border-bottom-left-radius: 30px;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  width: 400px;
}

section div {
  width: 30%;
  margin: 5px;
  height: 100px;
  background-color: grey;
}

section div:first-child {
  border-top-left-radius: 30px;
}

section div:last-child {
  border-bottom-right-radius: 30px;
}

section div:nth-child(3) {
  border-top-right-radius: 30px;
}

section div:nth-child(3n+1):nth-last-child(3),
section div:nth-child(3n+1):nth-last-child(2),
section div:nth-child(3n+1):last-child {
  border-bottom-left-radius: 30px;
}

.red {
  background-color: red;
}

<h1>Red box should always have a rounded corner in the bottom left.</h1>

<h2>Example A</h2>
<section class="a">
  <div></div>
  <div></div>
  <div></div>
  <div class="red"></div>
  <div></div>
  <div></div>
</section>

<h2>Example B</h2>
<section class="b">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="red"></div>
  <div></div>
</section>

<h2>Example C</h2>
<section class="b">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="red"></div>
</section>

<h2>Example D</h2>
<section class="b">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="red"></div>
  <div></div>
  <div></div>
</section>

带圆角的元素 - 如何检测特定元素以赋予它们特殊的样式？

Elements with rounded corners - how to detect specific elements to give them a special style?

css

css-selectors