Tailwind CSS 学习笔记(四)
Tailwind CSS 中的七大核心概念之一 —— Hover、Focus和其他状态
如何在Tailwind CSS 中设置元素的hover、focus、active 以及其他状态呢？只需要在预定义类前加上前缀即可。下面来看看具体情况。
例如：元素hover时改变背景颜色，只需要在`bg-sky-700`的类名前加上前缀，即`hover:bg-sky-700`即可.
<button class="bg-sky-500 hover:bg-sky-700 ...">
Save changes
</button>一、修饰符分类：
Tailwind CSS 可以设置的修饰符有很多，主要包括：
1、伪类(Pseudo-classes), 如：`:hover`，`:focus`，`:first-child`以及`:required`；
2、伪元素(Pseudo-elements), 如：`::before`，`::after`，`::placeholder`以及`::selection`；
3、媒体查询以及功能查询(Media and feature queries)，比如响应式，暗黑模式 以及 `prefers-reduced-motion`;
4、属性选择器(Attribute selectors), 如`[dir="rtl"]`、`[open]`
修饰符还可以叠加使用，例如：
<button class="dark:md:hover:bg-fuchsia-600 ...">
Save changes
</button>二、Tailwind CSS 中，修饰符的使用：
2.1、伪类：
2.1.1、作用在单元素上时：
| 伪类名 | Tailwind CSS 中对应的修饰符 | Tailwind CSS 中的示例 | 意义 |
|---|---|---|---|
| :hover | hover | class="bg-black hover:bg-white ..." | 鼠标hover 的时 |
| :focus | focus | class="border-gray-300 focus:border-blue-400 ..." | 元素聚焦的时 |
| :active | active | class="bg-blue-500 active:bg-blue-600 ..." | 当元素被按下时 |
| :visited | visited | class="text-blue-600 visited:text-purple-600 ..." | a 链接被访问时 |
| :focus-within | focus-width | class="focus-within:shadow-lg ... | 当元素或其子类聚焦的时 |
| :focus-visible | focus-visible | <a href="https://seinfeldquotes.com" class="focus:outline-none focus-visible:ring ..."/> | 当元素使用键盘聚焦时 |
| :target | target | <div id="about" class="target:shadow-lg ..."><!-- ... --> </div> | 一个元素的ID与当前的URL片段匹配时 |
| :first-child | first | class="py-4 first:pt-0 ..." | 一个元素内的第一个子元素 |
| :last-child | last | class="py-4 last:pb-0 ..." | 一个元素内的最后一个子元素 |
| :only-child | only | class="py-4 only:py-0 ..." | 一个元素的唯一一个子元素 |
| :nth-child(odd) | odd | class="bg-white odd:bg-gray-100 ..." | 一个元素内编号为奇数的元素 |
| :nth-child(even) | even | class="bg-white even:bg-gray-100 ..." | 一个元素内编号为偶数的元素 |
| :first-of-type | first-of-type | class="ml-2 first-of-type:ml-6 ..." | 一组兄弟元素中其类型的第一个元素 |
| :last-of-type | last-of-type | class="mr-2 last-of-type:mr-6 ..." | 一组兄弟元素中其类型的最后一个元素 |
| :only-of-type | only-of-type | class="mx-2 only-of-type:mx-6 ..." | 一个元素内只有一个该类型的子元素时 |
| :empty | empty | class="empty:hidden ..." | 一个元素没有内容时 |
| :disabled | disabled | <input class="disabled:opacity-75 ..." /> | 当一个input 禁用时 |
| :enabled | enabled | <input class="enabled:hover:border-gray-400 disabled:opacity-75 ..." /> |