我最近開(kāi)始在我的Nuxt項(xiàng)目中嘗試使用tailwind.css。所以我需要使用:not(:last-child)偽元素，但是我沒(méi)有找到方法。

<ul>
    <li
      v-for="(item, index) in items"
      :key="`item-${index}`"
      class="border-solid border-b border-black"
    >
      Item
    </li>
  </ul>

我想給所有的& lt李& gt除了最后一個(gè)。

我知道順風(fēng)有第一& amp最后一個(gè)偽類變量，但我不能將它們與:not()一起使用

答案就在你分享的文檔的最后一個(gè)鏈接里。

只需將last:border-b-0添加到所有列表項(xiàng)中，如果它是最后一個(gè)子項(xiàng)，它將刪除border-bottom。

<ul>
  <li
    v-for="(item, index) in items"
    :key="`item-${index}`"
    class="border-solid border-b border-black last:border-b-0"
  >
    Item
  </li>
</ul>

你可以使用順風(fēng)任意變量:

<li class="[&:not(:last-child)]:border border-sky-500">Item</li>

這是從順風(fēng)v3開(kāi)始提供的。

我們也可以通過(guò)選擇想要編輯的索引號(hào)來(lái)實(shí)現(xiàn)這一點(diǎn)

例:我把第一個(gè)改一下，下面的都要有風(fēng)格

<div
    v-for="(item, i) in items"
    :key="i"
    :class="{ 'mx-0': i === 0, 'mx-4': i > 0 }"
>
</div>

所以第一個(gè)元素的索引從0開(kāi)始，所以我們有一個(gè)x ^ 0的邊距，

下面所有的都有4倍的余量。