如何连接一个只影响 TailwindCSS 中第一个孩子的子孩子的类？

【问题标题】：How to wire a class that impacts only sub-child of the first child in TailwindCSS?如何连接一个只影响 TailwindCSS 中第一个孩子的子孩子的类？
【发布时间】：2022-10-19 05:37:24
【问题描述】：

我正在使用 React (Next.js) 和 TailwindCSS。

<ul>
  <li>
    <h1 className="bg-red-400">first</h1>
  </li>
  <li>
    <h1 className="bg-green-400">second</h1>
  </li>
  <li>
    <h1 className="bg-green-400">third</h1>
  </li>
  <li>
    <h1 className="bg-green-400">four</h1>
  </li>
</ul>

我想编写只更改<ul> 的第一个孩子的子孩子背景颜色的 TailwindCSS 类，例如

ul > li::first-child > h1

【问题讨论】：

标签： css reactjs next.js tailwind-css

【解决方案1】：

您不能使用默认的顺风 CSS 类定位 h1，但可以使用 pseudo-class references 定位第一个 li。

<li className="first:bg-red-400 first:text-black">

Tailwind recommends 如果可能的话不要这样做，但你也可以添加你的类 reuses tailwind's styles

@layer components {
 ul > li::first-child > h1 {
  @apply bg-red-400 text-black;
 }
}

【讨论】：

查看您链接到的页面，我认为您需要将first: 伪类添加到<li>，而不是<ul>。