圆角元素 - 如何检测特定元素以赋予它们特殊风格？答案

【问题标题】：Elements with rounded corners - how to detect specific elements to give them a special style?圆角元素 - 如何检测特定元素以赋予它们特殊风格？
【发布时间】：2021-11-03 22:54:47
【问题描述】：

我有一种奇怪的布局——盒子应该有圆角，就好像它们是一个大元素一样（参见带有 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;
}

这是一个小提琴：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>

【问题讨论】：

标签： css css-selectors

【解决方案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>

【讨论】：