我有class name search highlight group { x }的spans，其中x是正整數(shù)，可以是任何值。 對于給定的x，如果我們將class name search highlight group { x }的跨度作為一個(gè)組來看，我想對它們中的每一個(gè)應(yīng)用一個(gè)樣式，除了最后一個(gè)。我想知道每一個(gè)可能的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>

我想把我的風(fēng)格運(yùn)用到sp11、sp21以及其他可能出現(xiàn)在這里的比賽中。 我能用純css實(shí)現(xiàn)嗎？如果不是scss？

是的，使用新的n-child(S的An + B)是可能的，但是你必須單獨(dú)定義每種情況。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>

如果你能把編號(hào)的類添加到組中，我不明白為什么你不能把一個(gè). not-me類添加到每個(gè)組的最后一個(gè)項(xiàng)目中。

或者更好的方法是，使用包裝元素對項(xiàng)目進(jìn)行分組。

#items > span > span:nth-last-child(n+2) { color: red; }

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