Question

我最近开始在Nuxt项目中尝试tailwind.css。因此我需要使用:not(:last-child)伪元素，但找不到方法。

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

我想在所有<li>的末尾添加边框底。

我知道Tailwind具有first和last伪类变体，但是我不能将它们与:not()一起使用

Answer 1

答案在您共享的last in the docs的链接中。

只需将last:border-b-0添加到所有列表项，如果它是border-bottom，它将删除last-child。

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

Answer 2

已测试

我们还可以通过选择要编辑的索引号来实现

示例：我将更改第一个，以下所有内容均应具有样式

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

因此FIRST元素的索引从0开始，因此我们的边距为x 0，

，以下所有内容的边距均为4。

如何在tailwind.css中使用：not（）？

2 个答案: