UI状态伪类选择器简介

UI状态伪类选择器这个东西就是用来选择那些状态不同的UI元素，然后根据这些状态给它们加上各自特色的样式，就像给人化妆，看起来不一样）。尤其是在我们平常看到的网站或者APP里头，它才是真正的明星，因为就靠它能让那些表单看起来更舒服好用。不论是信息填写不对还是某个功能不能用或者能用，都离不开这个强大的武器（对，就是那个UI状态伪类选择器），这样才能让我们的页面或应用变得更好看，让你觉得亲切容易上手。

填写内容不符合要求的元素

看着你在HTML表格上瞎填乱写，我们真的是看在眼里疼在心上！什么不合法的网址、邮箱地址都得有个特殊待遇才行。这时候，就轮到UI伪类出来救场了，它能给那些规范外的录入框加点红色边框或警示标志，让你知道自己填错了哪儿。所以，大家在上网冲浪时也别忘了注意这些小细节~

:hover{ 
CSS样式 
}

    
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
    


    这是一个链接
    这是另一个链接

除了必须填写的部分，有些表单里面还有其他不太重要的小细节，你明白我说的？这个时候我们就用下这家伙`:optional`，给这些可选字段加点灰斜体的样式，这样不用填的地方就和要填的地方区分开来了，用户看得更清楚！

处理默认选取状态的单选框或复选框

有些时候，网页会出现那种就算你已经把选项点掉，但是那个框还是按着原来样子显示的情况。遇到这个问题，咱们就可以用`:default`这个选择器给它们重新设定一下风格。比如说，咱们要是想让默认被选中的复选框显示成蓝色，而且字号变粗的话，用这个办法就能实现，不管你是选上了再取消选，都能维持住这样的效果！

    
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
        a:active {
            background: #000;
            border: 1px solid black;
            color: white;
        }
    


    这是一个链接
    这是另一个链接

另外，当你的一堆单选框里都没亮灯的话，记得给它们一些提示！这样大家才能知道怎么下手呀。这时候，你就可以用这个指令条目效果’:indeterminate’来把所有未点亮的那些勾上个灰底或者加个斜杠边框，方便大家清楚现在是什么状况！

链接点击时的样式处理

    
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
    


    这是一个链接
    这是另一个链接

浏览网页可不能只看表单点链接的时候也得留意它的样子。利用这个叫做`:active`的掠过式选择器，你可以设定链接点了之后的实时样子，比如字变成彩色啦或者下划线消失之类的。这样做能让页面更炫酷，使用者也会觉得舒服多了。

对了，如果链接还是新的，没点过，就用`:link`这个伪类，给它加个样式。等点击过后，再用`:visited`这个伪类重新弄下样式。这样一来，大家都能清楚地看出哪些链接已经点过了，哪些还是崭新未碰的！

    
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px soild red;
            color: red;
        }
    


    这是一个链接
    这是另一个链接

可用与不可用状态下元素样式区分

input[type="text"]:hover{
            background: green;
        }
        input[type="text"]:focus{
            background: #ff6600;
            color: #fff;
        }
        input[type="text"]:active{
            background: blue;
        }
        input[type="password"]:hover{
            background: red;
        }
    


选择器E:hover、E:active和E:focus

姓名：




密码：

要让表单里的元素在使用或不能使用时看起来很不一样。可以用`:enabled`和`:disabled`选择器来定制样式。比如说，把不能用的输入框弄成淡灰色背景，而且点击都不行。能用的？就还是白底色，当鼠标晃过去还会亮亮的。

记住，控制输入框是只读还是可编辑也是关键！使用’:read-only’或’:read-write’选择器，就可以搞定这些问题啦～比如，把只读状态下的输入框边框变成灰色虚线，鼠标悬停时给出提示，这样用户一眼就能看明白了；而在可编辑状态下，黑色实线边框、鼠标悬停高亮显示等等功能，都是很实用且美观的设定~

各种验证与检查功能相关伪类

input[type="text"]:enabled{
            background: green;
            color: #ffffff;
        }
        input[type="text"]:disabled{
            background: #727272;
        }
    


E:enabled伪类选择器与E:disabled伪类选择器

姓名：




学校：

随着HTML5的推出，越来越多的网页都需要有验证功能了。比如说，如果你填错了邮箱或手机号的格式，就会看到红框；要是填对了，那就是绿框！这就是’:valid’和’:invalid’伪类选择器的用处，能让我们方便地设定不同的样式。

首先，我们要搞定的是在数值区间内合理的值和出界的情况下，如何妥善应对。用år::in-range 和`:out-of-range`伪类选择器来处理，简单地给数字输入框设个上下限就行了，然后看你输进去的数有没有在这个范围里，就能自动调整显示效果。

其他UI元素状态相关伪类介绍

除了刚才说的那些常用的UI状态相关的伪类选择器外，还得注意这些特殊情况！比如说`:checked`伪类选择器主要是用来处理选中 radio 单选钮或者checkbox复选框的样式设定的；再比如`:required`和`:optional`这对组合，就是专门对付那啥…必填项目和非必填项目的。

input[type="text"]:read-only{
            background: #000;
            color: green;
        }
        input[type="text"]:read-write{
            color: #ff6600;
        }
    


read-only伪类选择器与E:read-write伪类选择器

姓名：




学校：

你知道吗？当网页载入的时候，默认情况下是会选中某些东西的；还有就是如果一堆复选框全都是空着的，也是有应对办法的！利用:default 和:indeterminate 的神奇里斯本伪类别选择器，就能够轻松搞定默认选中的控件和整个控件组未选中时的样子~

有时候，你得根据具体情况，调整文字或者区块在鼠标拖拽或者键盘 Tab 键聚焦时的显示效果。这个时候，你就可以看看:focus-within 这样的 UI 交互相关伪类怎么用，方便你进行相应的设计。

结语

这篇文章给大家讲讲UI状态伪类选择器是怎么用在HTML表格里的和他们有啥作用。然后还会谈实际例子，教你们在什么场景下用这玩意儿让页面更酷炫、好用，同时互动性也更强。希望你能把这些CSS技能掌握好，做出既好看又能用，而且好玩的网站。

input[type="checkbox"]:checked{
            outline: 2px solid green;
        }
    


checked伪类选择器

房屋状态： 水 电 天然气 宽带

。