如何用Tailwind选择列表内a标签并排除特定项设置样式？

需求说明 #

给<ul>中的所有<a>标签（linka至linkf）应用样式，但需排除linkb和linkd，要求直接定位<a>标签并添加样式类。尝试使用:nth-child和Tailwind未成功，自行编写的代码无效。

原始HTML结构 #

<ul>
    <li><a href="/" class="">linka</a></li>
    <li><a href="/" class="">linkb</a></li>
    <li><a href="/" class="">linkc</a></li>
    <li><a href="/" class="">linkd</a></li>
    <li><a href="/" class="">linke</a></li>
    <li><a href="/" class="">linkf</a></li>
</ul>

尝试的无效代码 #

ul > li > a {
@apply [&>*:not(:nth-child(-n+1))]:block;
}

有效解决方案 #

方法1：纯CSS选择器直接定位 #

利用父元素<li>的:nth-child结合:not()排除指定项，再定位内部的<a>标签：

ul > li:not(:nth-child(2)):not(:nth-child(4)) > a {
  /* 替换为你需要的样式，示例用Tailwind的@apply */
  @apply block text-blue-600 font-medium;
}

逻辑说明：li:not(:nth-child(2)):not(:nth-child(4))选中除了第2个和第4个之外的所有<li>，再通过> a定位这些<li>内部的<a>，自然排除了linkb和linkd对应的标签。

方法2：Tailwind自定义选择器（无需手动修改HTML） #

如果希望完全用Tailwind的方式实现，可在配置文件中添加自定义选择器：

1. 修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      // 自定义选择器别名
      selectors: {
        'target-link': 'ul > li:not(:nth-child(2)):not(:nth-child(4)) > a',
      },
    },
  },
  plugins: [],
};

2. 在全局CSS中通过@layer注册工具类：

@layer utilities {
  .target-link {
    @apply block text-blue-600 font-medium;
  }
}

方法3：直接修改HTML添加类（最直观） #

如果允许修改HTML代码，直接给需要应用样式的<a>标签添加类：

<ul>
    <li><a href="/" class="block text-blue-600 font-medium">linka</a></li>
    <li><a href="/" class="">linkb</a></li>
    <li><a href="/" class="block text-blue-600 font-medium">linkc</a></li>
    <li><a href="/" class="">linkd</a></li>
    <li><a href="/" class="block text-blue-600 font-medium">linke</a></li>
    <li><a href="/" class="block text-blue-600 font-medium">linkf</a></li>
</ul>

为什么之前的代码无效 #

你编写的代码逻辑错误：[&>*:not(:nth-child(-n+1))]:block是给<a>标签的子元素设置样式，而非<a>本身，且:nth-child(-n+1)是选中第一个子元素，完全不符合需求的定位逻辑，因此无效。

内容的提问来源于stack exchange，提问作者Boq7