Cara menggunakan css pada setiap elemen kecuali elemen terakhir dalam kumpulan tertentu

Question

Saya mempunyai rentang className SearchHighlightGroup{x} di mana x ialah integer positif yang boleh mempunyai sebarang nilai.

Untuk x yang diberikan, jika kita menganggap rentang className x，如果我们将 className SearchHighlightGroup{x} sebagai satu set, saya ingin menggunakan gaya pada setiap daripada mereka kecuali yang terakhir. Saya mahu setiap x menjadi OK.

Contohnya, jika saya mempunyai:

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

Saya ingin menerapkan gaya saya pada sp11, sp21 - dan rentang lain yang mungkin wujud di sini.

Bolehkah saya melakukan ini menggunakan css tulen? scss jika tidak?

Answer 1

Ya, adalah mungkin untuk menggunakan nth-child(An + B of S) baharu, tetapi anda perlu menentukan setiap kes secara individu. Sass boleh membantu anda menjana semua pemilih

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>

Berikut ialah kod Sass untuk menjana sebarang bilangan pemilih:

@for $i from 1 through 10 {
  span:nth-last-child(n + 2 of [class*=SearchHighlightGroup#{$i}]) {color: red;}
}