如何將 css 應用到特定群組中除最後一個元素之外的每個元素
P粉596161915
P粉596161915 2023-09-07 20:36:54
0
1
506

我有 className SearchHighlightGroup{x} 的跨度,其中 x 是可以有任何值的正整數。

對於給定的 x,如果我們將 className SearchHighlightGroup{x} 的跨度視為一組,我想對其中每個跨度應用一種樣式,除了最後一個。我希望每個 x 都可以。

例如,如果我有:

<span class="SearchHighlightGroup1">sp11</span>
<span class="SearchHighlightGroup1">sp12</span>
<span class="SearchHighlightGroup2">sp21</span>
<span class="SearchHighlightGroup2">sp22</span>
<span class="SearchHighlightGroup3">sp31</span>

我想將我的樣式應用於 sp11、sp21 - 以及可能存在於此處的其他跨度。

# 我可以使用純 css 來實現嗎? scss 如果不是?

P粉596161915
P粉596161915

全部回覆(1)
P粉811349112

是的,可以使用新的nth-child(An B of S),但您必須單獨定義每個情況。 Sass 可以幫助您產生所有選擇器

span:nth-last-child(n + 2 of [class*=SearchHighlightGroup1]) {
  color: red;
}
span:nth-last-child(n + 2 of [class*=SearchHighlightGroup2]) {
  color: blue;
}
span:nth-last-child(n + 2 of [class*=SearchHighlightGroup3]) {
  color: green;
}
<span>ignore</span>
<span class="SearchHighlightGroup1">sp11</span>
<span class="SearchHighlightGroup1">sp12</span>
<span class="SearchHighlightGroup2">sp21</span>
<span class="SearchHighlightGroup2">sp22</span>
<span>ignore</span>
<span>ignore</span>
<span class="SearchHighlightGroup3">sp31</span>
<span>ignore</span>

這裡有一個 Sass 程式碼,用來產生任意數量的選擇器:

@for $i from 1 through 10 {
  span:nth-last-child(n + 2 of [class*=SearchHighlightGroup#{$i}]) {color: red;}
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!