Tailwind CSS 选择直接子元素的多种方法

问题描述

在 HTML 结构中，我们经常需要选择某个元素的直接子元素并应用样式：

<div class="section">
   <div class="header">header</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

在原生 CSS 中，我们可以使用 div.section > div 选择器来选择 .section 的直接子元素。那么在 Tailwind CSS 中该如何实现呢？

解决方案

根据不同的 Tailwind CSS 版本和使用场景，有多种方法可以实现这个需求：

方法一：使用任意变体（Arbitrary Variants）

从 Tailwind CSS v3.1 开始，可以使用任意变体直接在选择器中编写 CSS 选择器：

所有直接子元素

<!-- 给所有直接子元素添加内边距 -->
<div class="[&>*]:p-4 [&>*]:bg-blue-200">
  <p>这个段落会有内边距</p>
  <div>另一个带内边距的元素</div>
</div>

特定类型的直接子元素

<!-- 只给直接子元素中的段落添加样式 -->
<div class="[&>p]:mt-3 [&>p]:bg-yellow-200">
  <p>这个段落会有顶部外边距</p>
  <p>这个也会有</p>
</div>

后代元素（非直接子元素）

<!-- 给所有后代元素添加样式（非直接子元素） -->
<div class="[&_*]:p-4 [&_p]:mt-0">
  <div>直接子元素</div>
  <div>
    <p>后代元素（也会被选中）</p>
  </div>
</div>

TIP

在选择器中使用空格时，需要在 Tailwind 类名中用下划线 _ 代替空格

方法二：使用通配符选择器（Tailwind v3.4+）

从 Tailwind CSS v3.4 开始，提供了原生子选择器支持：

<div class="*:text-gray-200 hover:*:text-blue-500">
  <div>子元素1</div>
  <div>子元素2</div>
</div>

方法三：自定义变体（插件方式）

可以创建自定义变体来处理子元素选择：

Tailwind v3 配置

// tailwind.config.js
module.exports = {
  plugins: [
    function ({ addVariant }) {
      addVariant('child', '& > *');
      addVariant('child-hover', '& > *:hover');
    }
  ],
}

Tailwind v4 配置

/* 在样式文件中 */
@custom-variant child (& > *);
@custom-variant child-hover (& > *:hover);

使用自定义变体：

<div class="child:text-gray-200 child-hover:text-blue-500">
  <div>子元素1</div>
  <div>子元素2</div>
</div>

方法四：创建特定类型的子元素选择器

可以创建针对特定元素类型的子选择器：

/* 针对不同元素类型的自定义变体 */
@custom-variant sub-div (& > div);
@custom-variant sub-para (& > p);
@custom-variant sub-li (& > li);
@custom-variant sub-tr (& > tr);
@custom-variant sub-td (& > td);

<div class="sub-div:bg-yellow-200">
  <div>这个div会被选中</div>
  <p>这个段落不会被选中</p>
</div>

进阶用法

结合其他伪类

可以结合 :first、:last、:odd、:even 等伪类使用：

<div class="child:first:bg-yellow-100 child:last:bg-yellow-200 child:even:bg-yellow-300 child:odd:bg-yellow-400">
  <div>第一个子元素</div>
  <div>第二个子元素</div>
  <div>第三个子元素</div>
  <div>最后一个子元素</div>
</div>

表格样式示例

对于表格结构，可以创建专门的变体：

@custom-variant table-th (& > thead > tr > th);
@custom-variant table-td (& > tbody > tr > td);
@custom-variant table-body-tr (& > tbody > tr);

<table class="table-th:text-lg table-td:text-blue-500 table-body-tr:odd:bg-gray-100">
  <thead>
    <tr><th>标题1</th><th>标题2</th></tr>
  </thead>
  <tbody>
    <tr><td>内容1</td><td>内容2</td></tr>
    <tr><td>内容3</td><td>内容4</td></tr>
  </tbody>
</table>

版本兼容性说明

WARNING

不同 Tailwind CSS 版本支持的功能有所差异：

• v3.1+：支持任意变体 [&>*]
• v3.4+：支持通配符选择器 *:
• v4：推荐使用 @custom-variant 指令

总结

在 Tailwind CSS 中选择直接子元素有多种方法，根据你的项目需求和技术栈选择最适合的方案：

1. 简单场景：使用任意变体 [&>*]（v3.1+）
2. 现代项目：使用通配符选择器 *:（v3.4+）
3. 复杂项目：创建自定义变体提高可维护性
4. 特定需求：创建针对性的元素类型选择器

选择方法时考虑项目的 Tailwind 版本、代码可读性和维护性需求。对于大多数情况，任意变体提供了最直接灵活的解决方案。