帶圓角的元素-如何檢測特定元素以賦予它們特殊的樣式？-有解無憂

我有一種奇怪的布局 - 盒子應該有圓角，就好像它們是一個大元素一樣（參見帶有 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;
}

這是一個小提琴：帶圓角的元素 - 如何檢測特定元素以賦予它們特殊的樣式？

uj5u.com熱心網友回復：

您可以組合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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346561.html

標籤：css css-选择器

上一篇：為什么我的側邊導航欄與網頁上的文字重疊

下一篇：更改HTML從JavaScript中選擇標簽字體顏色