suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So wenden Sie CSS auf jedes Element außer dem letzten Element in einer bestimmten Gruppe an

Ich habe einen Bereich von className SearchHighlightGroup{x}, wobei x eine positive ganze Zahl ist, die einen beliebigen Wert haben kann.

Wenn wir für einen gegebenen x die Spannen von className x,如果我们将 className SearchHighlightGroup{x} als eine Menge betrachten, möchte ich auf jeden von ihnen außer dem letzten einen Stil anwenden. Ich möchte, dass jedes x in Ordnung ist.

Wenn ich zum Beispiel:

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

Ich möchte meine Stile auf SP11, SP21 – und andere Bereiche anwenden, die hier möglicherweise existieren.

Kann ich das mit reinem CSS machen? scss wenn nicht?

P粉596161915P粉596161915522 Tage vor583

Antworte allen(1)Ich werde antworten

  • P粉811349112

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

    是的,可以使用新的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;}
    }

    Antwort
    0
  • StornierenAntwort