Maison  >  Questions et réponses  >  le corps du texte

Comment appliquer CSS à chaque élément sauf le dernier élément d'un groupe spécifique

J'ai une étendue de className SearchHighlightGroup{x} où x est un entier positif qui peut avoir n'importe quelle valeur.

Pour un x donné, si l'on considère les étendues de className x,如果我们将 className SearchHighlightGroup{x} comme un ensemble, je souhaite appliquer un style à chacun d'eux sauf le dernier. Je veux que chaque x soit OK.

Par exemple, si j'ai :

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

Je souhaite appliquer mes styles à sp11, sp21 - et à d'autres spans qui peuvent exister ici.

Puis-je le faire en utilisant du CSS pur ? scss sinon ?

P粉596161915P粉596161915427 Il y a quelques jours504

répondre à tous(1)je répondrai

  • P粉811349112

    P粉8113491122023-09-08 18:34:55

    Oui, il est possible d'utiliser le nouveau nth-child(An + B of S), mais il faut définir chaque cas individuellement. Sass peut vous aider à générer tous les sélecteurs

    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>

    Voici un code Sass pour générer n'importe quel nombre de sélecteurs :

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

    répondre
    0
  • Annulerrépondre