empty

元素没有content时生效

    <div class="flex p-2">
        <div class="w-12 h-12 bg-yellow-300 empty:bg-yellow-700">xxx</div>
        <div class="w-12 h-12 bg-yellow-300 empty:bg-yellow-700"></div>
    </div>

disabled和enabled

html中有七个元素支持叫disabled的属性：<button>, <fieldset>, <optgroup>, <option>, <select>, <textarea>, <input>。

其语义如同其单词含义一样：当前元素的功能被禁用，比如按钮不能被点击，输入控件不能输入内容等。

当元素功能被禁用时，CSS中的伪类disabled就能选中这些元素，反之，enabled就能选中这类元素。

在tailwind中，这两个单词也同样的类前缀名，如下所示：

    <div class="flex p-2">
        <button class="w-12 h-12 disabled:bg-gray-500 enabled:bg-green-500" disabled></button>
        <button class="w-12 h-12 disabled:bg-gray-500 enabled:bg-green-500"></button>
    </div>

checked、indeterminate、default

<input type="checkbox">和<input type="radio">，在选中时，匹配伪类checked。
通过JS代码，还可以把它们的状态置成一种叫indeterminate的状态：既不是选中，也不是没选中。这时就匹配伪类indeterminate
如果直接把"checked"当作HTML元素的属性写在HTML文档中的话，即<input type="checkbox" checked>这种，则有两个功能：
- 一方面，把这个选项的状态置为“选中”状态
- 二方面，将这个选项本身标记为“默认选中”，即这是一个特殊的选项。而这个特殊的选项，就可以用default伪类来匹配出来

下面用一个简单的例子来说明：

    <div class="p-2 flex flex-col">

        <div>
            <input type="checkbox" name="option1" id="o1" class="appearance-none w-3 h-3 outline-1 checked:bg-green-500 indeterminate:bg-yellow-500 default:outline-red-500" checked>
            <label for="o1">Option 1</label>
        </div>

        <div>
            <input type="checkbox" name="option2" id="o2" class="appearance-none w-3 h-3 outline-1 checked:bg-green-500 indeterminate:bg-yellow-500 default:outline-red-500">
            <label for="o2">Option 2</label>
        </div>

        <div id="btn">click to set indeterminate</div>

    </div>

    <script>
        document.getElementById("btn").addEventListener("click", function () {
            const o1 = document.getElementById("o1");
            const o2 = document.getElementById("o2");
            o1.indeterminate = true;
            o2.indeterminate = true;
        });
    </script>

上面例子有以下要点：

default匹配的是“这个元素是否在默认时就被选中”，而与它后续是否被人为的选中，或取消，没有关系。更直接一点说，就是看这个元素有没有checked标记
indeterminate状态通过用户操作和单纯的HTML都不能达到，只能通过JS代码来达成
浏览器对checkbox和radio有很强的默认样式，默认的小方块、圆圈，包括选中后方块里的小对号，圆圈里的小黑点，都是浏览器自定义的样式。
- 要自定义这俩玩意的样式，需要先用appearance-none来把默认样式清除掉，清除掉你就会发现，无论是checkbox还是radio，都是没有尺寸、样式的空白元素，跟div一样

optional、required、valid、invalid

<input>, <select>, <textarea>这三个元素，在写HTML时都可以添加一个属性叫required，代表必填控件：默认情况下没值的时候，表单是不会提交的。

而optional匹配的就是没有带required的元素，反之required匹配的就是带required的元素。

而对于各种<input>来说，其实HTMl标准自带了一套“检查输入的值是否有效”的机制，最简单的，<input type="URL">和<input type="email">就自带了值检查机制：如果用户输入的值不是合法的URL或者邮件地址，那么CSS伪类invalid就能匹配上这个元素，反之valid就能匹配上。

关于HTML标准中输入校验的部分，详情可以看这里。

在tailwind中，前缀名和CSS中的伪类名保持一致。

    <div class="p-2 flex flex-col">

        <div>
            <label for="ue">Email: </label>
            <input type="email" name="userEmail" id="ue" class="m-3 required:outline-3 optional:outline-1 valid:bg-green-300 invalid:bg-red-300" required />
        </div>

        <div>
            <label for="ue2">Another Email: </label>
            <input type="email" name="anotherEmail" id="ue2" class="m-3 required:outline-3 optional:outline-1 valid:bg-green-300 invalid:bg-red-300" />
        </div>

    </div>

以上示例中：

第一个输入框，在没有值的时候，底色也是红的，而第二个输入框在没有值的时候，底色是绿的，这代表required输入框在没值的时候也被判定为invalid

in-range、out-of-range

某些类型的<input>可以配合min和max属性使用，最常见的就是<input type="number" min="1" max="5">这种。当输入的内容在min和max范围内时，或者输入内容为空时，就可以被伪类in-range匹配，否则就会被伪类out-of-range匹配。

这个东西功能上与valid和invalid有些重叠，大多数情况下，in-range也意味着valid，out-of-range也意味着invalid，但取值范围只是校验输入是否合法的一道检查，如果<input>元素还附带了其它检查项，比如附加了required，或者将正则表达式附加在pattern属性上时，in-range就不一定也匹配valid了，但out-of-range一定是invalid

下面是个简单的例子，这个数字输入控件用required标记着required，所以在默认无值的情况下，可以匹配in-range，但不能匹配valid。

    <div class="p-2 flex flex-col">

        <div>
            <label for="age_input">Age: </label>
            <input type="number" name="age" id="age_input" min="0" max="120" class="outline-3 valid:bg-green-300 invalid:bg-red-300 in-range:outline-green-300 out-of-range:outline-red-300" required />
        </div>

    </div>

placeholder-shown

<input>元素可以使用placeholder属性，在用户未输入任何值时，来在输入控件内部显示一些值，这个值只起提示作用，如果用户执意留空，这个值也不会传递给元素的value。当用户输入任何内容后，这个提示值就会从视觉上消失。

当提示值展示时，就可以使用placeholder-shown来匹配这个<input>

    <div class="p-2 flex flex-col">

        <div>
            <label for="email_input">Email: </label>
            <input type="email" name="email" id="email_input" placeholder="[email protected]" class="outline-3 placeholder-shown:outline-red-500 placeholder-shown:text-cyan-700"/>
        </div>

    </div>

autofill

对于表单控件，浏览器本身可能会记住一些值，典型的就是用户名与密码，浏览器有时会为用户自动填充这些值。而autofill这个伪类就可以匹配那些被浏览器自动填充上值的<input>。

但对于自动填充上值的控件，主流浏览器都会非常强硬的使用内置的一些样式，包括但不限于前景色、背景色、背景图片等样式，这些样式是很难通过CSS代码去改变的。浏览器厂商这样做的原因大致是想让用户在不同网站，都能获得一个比较统一的“这个值是自动填充上去的”的感觉。

    <form action="/login" method="POST" class="p-2 flex flex-col">

        <div>
            <label for="username_input">username: </label>
            <input type="username" name="username" id="username_input" class="outline-3 autofill:outline-yellow-500"/>
        </div>

        <div class="mt-2">
            <label for="password_input">Password: </label>
            <input type="password" name="password" id="password_input" class="outline-3 autofill:outline-yellow-500"/>
        </div>

    </form>

readonly

向<input>添加属性readonly，可以使这个控件的值不可编辑。这种状态的控件就会被伪类read-only所匹配。如下：

    <div class="p-2 flex flex-col">

        <div>
            <label for="readonly_input">This is a readonly text input: </label>
            <input type="text" id="readonly_input" value="You can not edit" readonly class="read-only:bg-yellow-300"/>
        </div>

    </form>

注意：HTML属性是readonly，但CSS伪类与tailwind类前缀均是带分词杠的read-only

伪类(2)