搜索

首页  >  问答  >  正文

如何将 css 应用到特定组中除最后一个元素之外的每个元素

我有 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粉596161915P粉596161915448 天前529

全部回复(1)我来回复

  • 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;}
    }

    回复
    0
  • 取消回复