【问题标题】: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>

我想编写只更改&lt;ul&gt; 的第一个孩子的子孩子背景颜色的 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: 伪类添加到&lt;li&gt;,而不是&lt;ul&gt;
    猜你喜欢
    • 1970-01-01
    • 2017-03-11
    • 1970-01-01
    • 1970-01-01
    • 2012-02-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-06-28
    相关资源
    最近更新 更多