TailwindCSS 状态伪类简要教程

TailwindCSS 提供了一种强大的机制，让开发者可以通过 状态伪类（如 hover、focus 等）来有条件地应用样式。这使得你能够根据元素的不同状态调整其外观，例如鼠标悬停、点击或元素获得焦点时动态改变样式。

1. 状态伪类使用简介

在 TailwindCSS 中，通过在实用类名前加修饰符的方式，来实现状态伪类。例如，要在鼠标悬停时改变背景颜色，可以使用 hover:bg-sky-700：

<button class="bg-sky-500 hover:bg-sky-700">
  Save changes
</button>

在这个例子中，按钮的默认背景为 bg-sky-500，当鼠标悬停时背景颜色会平滑过渡到 bg-sky-700。

2. 常用状态伪类

以下是 TailwindCSS 中一些常用的状态伪类：

• hover: 鼠标悬停时应用样式。
• focus: 元素获得焦点时应用样式。
• active: 元素被按下时应用样式。
• first: 元素是父容器的第一个子元素时应用样式。
• last: 元素是父容器的最后一个子元素时应用样式。
• odd: 子元素为奇数编号时应用样式。
• even: 子元素为偶数编号时应用样式。
• checked: 当复选框或单选按钮被选中时应用样式。
• disabled: 元素被禁用时应用样式。

例如，为表格的奇数行和偶数行设置不同的背景颜色：

<table>
  <tr class="odd:bg-gray-100 even:bg-gray-200">
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
</table>

3. 其他修饰符

除了常规的状态伪类外，TailwindCSS 还支持一些灵活的上下文修饰符：

group-* 修饰符

通过 group 类为父元素添加状态，从而对子元素应用样式：

<div class="group">
  <button class="group-hover:bg-blue-500">
    Hover Parent
  </button>
</div>

当鼠标悬停在父元素上，按钮背景颜色会改变。

peer-* 修饰符

通过 peer 类，让兄弟元素的状态控制目标元素样式：

<input type="checkbox" class="peer hidden" id="toggle">
<label for="toggle" class="peer-checked:bg-green-500">
  Checked Label
</label>

当复选框被选中时，标签的背景颜色会变为绿色。

has-* 修饰符

根据后代元素的状态或内容设置当前元素样式。例如：有内容的父元素样式变化。

4. 自定义修饰符

TailwindCSS 支持通过 CSS 伪类自定义修饰符。例如，为第三个子元素添加下划线样式：

<div class="[&:nth-child(3)]:underline">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</div>

此示例中，第三个子元素会被应用下划线样式。

5. 总结

通过使用状态伪类和修饰符，TailwindCSS 能够帮助开发者快速构建动态、交互性强的用户界面。常用伪类如 hover、focus、active，结合 group 和 peer 等增强功能，让样式控制更加灵活，适用范围更广。

希望通过本教程，你可以轻松上手 TailwindCSS 的状态伪类，提升开发效率！