css3之UI元素状态伪类选择器

最新推荐文章于 2022-08-25 20:03:53 发布
最新推荐文章于 2022-08-25 20:03:53 发布
阅读量6.4k 收藏 13
点赞数 6
分类专栏： html5/css相关 文章标签： html5 css3 UI元素状态伪类选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012859748/article/details/52612139
版权

所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！

浏览器兼容性：

E:hover                 支持firefox、safari、Opera、ie8、chrome            ------------
E:active                 支持firefox、safari、Opera、chrome                      不支持ie8
E:focus                 支持firefox、safari、Opera、ie8、chrome            -------------
E:enabled             支持firefox、safari、Opera、chrome                    不支持ie8
E:disabled            支持firefox、safari、Opera、chrome                    不支持ie8
E:read-only          支持firefox、Opera                             不支持ie8、safari、chrome
E:read-write         支持firefox、Opera                             不支持ie8、safari、chrome
E:checked           支持firefox、safari、Opera、chrome                    不支持ie8
E::selection           支持firefox、safari、Opera、chrome                  不支持ie8
E:default              只支持firefox                                                          ------------
E:indeterminate    只支持chrome                                                      ------------
E:invalid               支持firefox、safari、Opera、chrome                 不支持ie8
E:valid                  支持firefox、safari、Opera、chrome                  不支持ie8
E:required            支持firefox、safari、Opera、chrome                  不支持ie8
E:optional             支持firefox、safari、Opera、chrome                 不支持ie8
E:in-range            支持firefox、safari、Opera、chrome                 不支持ie8
E:out-of-rang        支持firefox、safari、Opera、chrome                 不支持ie8
下面就其使用做详细的说明;

1、选择器E:hover、E:active和E:focus
  1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
 使用方法：
 <元素>:hover{
 CSS样式
 }
 我们可以在“<元素>”中添加元素的type属性。
 例：
 input[type="text"]:hover{
 CSS样式
 }
 2)、E:active选择器被用来指定元素被激活时使用的样式
 3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。

例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择器E:hover、E:active和E:focus</title>
    <style>
        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;
        }
    </style>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名">
    <br/>
    <br/>
    密码：<input type="password" placeholder="请输入密码">
</form>
</body>
</html>
2、E:enabled伪类选择器与E:disabled伪类选择器
 1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
 2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。

例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:enabled伪类选择器与E:disabled伪类选择器</title>
    <style>
        input[type="text"]:enabled{
            background: green;
            color: #ffffff;
        }
        input[type="text"]:disabled{
            background: #727272;
        }
    </style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名" disabled>
    <br/>
    <br/>
    学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
3、E:read-only伪类选择器与E:read-write伪类选择器
 1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
 2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>read-only伪类选择器与E:read-write伪类选择器</title>
    <style>
        input[type="text"]:read-only{
            background: #000;
            color: green;
        }
        input[type="text"]:read-write{
            color: #ff6600;
        }
    </style>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>
    <br/>
    <br/>
    学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
4、伪类选择器E:checked、E:default和indeterminate
 1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
 2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
 3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>checked伪类选择器</title>
    <style>
        input[type="checkbox"]:checked{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
    房屋状态：
    <input type="checkbox">水
    <input type="checkbox">电
    <input type="checkbox">天然气
    <input type="checkbox">宽带
</form>
</body>
</html>
默认的选择项 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>default伪类选择器</title>
    <style>
        input[type="checkbox"]:default{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>default伪类选择器</h1>
<form>
    房屋状态：
    <input type="checkbox" checked>水
    <input type="checkbox">电
    <input type="checkbox">天然气
    <input type="checkbox">宽带
</form>
</body>
</html>
<h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate伪类选择器</h1><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>indeterminate伪类选择器</title>
    <style>
        input[type="radio"]:indeterminate{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
    性别：
    <input type="radio">男
    <input type="radio">女
</form>
</body>
</html>
5、伪类选择器E::selection
 1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。

例如

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伪类选择器E::selection</title>
    <style>
        ::selection{
            background: green;
            color: #ffffff;
        }
        input[type="text"]::selection{
            background: #ff6600;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<p>今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！</p>
<input type="text" placeholder="文本">
</body>
</html>

6、E:invalid伪类选择器与E:valid伪类选择器
 1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
 2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。

例如

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:invalid伪类选择器与E:valid伪类选择器</title>
    <style>
        input[type="email"]:invalid{
            color: red;
        }
        input[type="email"]:valid{
            color: green;
        }
    </style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
    <input type="email" placeholder="请输入邮箱">
</form>
</body>
</html>

7、E:required伪类选择器与E:optional伪类选择器
 1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
 2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:required伪类选择器与E:optional伪类选择器</title>
    <style>
    input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名" required>
    <br/>
    <br/>
    学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>

8、E:in-range伪类选择器与E:out-of-range伪类选择器
 1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
 2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

例如

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
    <style>
        input[type="number"]:in-range{
            color: #ffffff;
            background: green;

        }
        input[type="number"]:out-of-range{
            background: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>
<input type="number" min="0" max="100" value="0">
</body>
</html>




打不死滴小强
关注
  • 6
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯css3 select,CSS3 纯CSS跨浏览器SELECT选择框自定义设计
weixin_34082139的博客
08-03 358
CSS语言：CSSSCSS确定.select {position: relative;height: 47.5px;background: white;box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);}.select:after {content: '';position: absolute;top: 0;width: 0;height: 0;right: 10px...
Css伪类选择器之状态伪类、目标伪类篇
路虽远，行则必至！
04-27 1367
伪类选择器 四、状态伪类       状态伪类主要针对表单进行设计的，由于表单是UI设计的灵魂，因此吸引了广大用户的关注。UI是User Interface（用户界面）的缩写，UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。 CSS3新定义了3种常用的UI状态伪类选择器。简单说明如下： :enabl...
图解CSS选择器状态伪类
syzdev的博客
03-30 1066
1 本文简介 在CSS伪类中，主要分为操作状态伪类、选择器状态伪类和表单状态伪类几种，本文要介绍的选择器状态伪类在规范中大概有十几种，本文仅介绍常见的类型，即与type有关的选择器状态伪类和与child有关的选择器状态伪类两种。 2 选择器状态伪类 2.1 type相关 element:first-of-type：选择父元素下的第一个类型为element的元素。如下面例子中span:first-of-type会匹配所有拥有子元素span的父元素，并忽略父元素中的非span元素，再匹配各个父元素中的第一个s
项目实训 - Scene-UI - 编写select
qq_45785407的博客
05-23 943
选择器 HTML原生的select组件虽然功能尚可，但是缺乏扩展与美化的方法，因此需要自己使用其他基本组件组合一个Select组件出来，本篇记录自己完成select组件的全过程，分为单选与多选两个模块： 单选 定义select的props如下： import { isString, isBooleanArray } from "../../core/utils/typeAssert" export const selectProps = { modelValue:{//选择器绑定的值
css伪类选择器
qq_51099065的博客
08-25 355
伪类选择器
css3之UI元素状态伪类选择器实例演示
09-27
主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
远离JS灾难css灾难之 js私有函数和css选择器作为容器
10-28
为了避免样式冲突，开发者可能需要为每个模块创建独立的CSS类或者使用BEM（Block Element Modifier）等命名约定来增加选择器的唯一性。这种方法可以更好地控制样式的作用范围，减少意外的影响。 在事件处理方面，...
css选择器.docx
10-14
- **UI元素状态伪类**：`:enabled`,`:disabled`,`:checked`,`:selection`。 - **否定伪类**：`:not(s)`，匹配不匹配`s`的选择器的元素。 - **动态伪类**：`:link`,`:visited`,`:active`,`:hover`，与基础链接伪类...
基于Vue和Element UI的图标选择器组件设计源码 - e-icon-picker
最新发布
05-29
本源码提供了一个基于Vue和Element UI的图标选择器组件的设计。项目包含120个文件，其中包括48个SVG文件、27个JavaScript文件、12个Vue文件、3个JSON文件、3个CSS文件、3个TypeScript文件，以及用于配置和资源的文件...
html5+css3 select
03-04
html5+css3设计的select绚丽样式！
CSS常用伪类选择器详解
热门推荐
qq_43293207的博客
03-24 1万+
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
select 下拉列表选择框效果及美化（before 和 :after伪元素的妙用）
uffgfbft的博客
11-01 2968
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&a
html自定义select样式,CSS3自定义select选择框样式
weixin_28740299的博客
06-15 436
cssbody {background:#2d2d2d;display:flex;justify-content: center;align-items:center;flex-wrap:wrap;padding:0;margin:0;height:100vh;width:100vw;font-family: sans-serif;color:#FFF;}.select {display:flex...
用CSS设置select的样式
weixin_48596030的博客
01-11 4585
用CSS设置select的样式
CSS选择器(select)
Lonelydesertea的博客
12-04 3852
■开发中经常需要找到特定的网页元素进行 ■什么是css选择器 设置样式 □按照一定的规则选出符合的元素,为之添加css样式 ■思考:如何找到特定的那个元素? ■ 选择器的种类繁多,大概可以这么归类 □ 通用选择器(universal selector) □ 元素选择器(type selectors) □ 类选择器(class selectors) □ id选择器(id selectors) □ 属性选择...
CSS3 下select下拉列表样式的修改
weixin_30410999的博客
12-02 451
都知道页面中如果不给select添加样式的话，就会是系统默认的样式，如下图，很丑吧！ 而狠多时候我们都希望对select的样式进行修改，以使得它能够更加美观一点，在css2.0下面我们除了设置一些基本 的样式之外，是没有办法把select变的更好看的，尤其是那个很丑的下拉箭头我是没有正常的办法把它隐藏掉的。总 结了一下，更改sel...
css3获取最后一个元素,一个CSSselect器来获取最后一个可见的div
weixin_30831105的博客
08-04 4076
你可以用JavaScript或者jQuery来select和设置它，但是CSS本身不能做到这一点。例如，如果你在网站上实现了jQuery ，你可以这样做：var last_visible_element = $('div:visible:last');虽然希望你有一个包装在你select的div的class / ID，在这种情况下你的代码看起来像：var last_visible_element ...
写一段UI状态伪类选择器的教学代码
05-19
好的，以下是一个简单的UI状态伪类选择器的教学代码： ```css /* 当鼠标悬停在按钮上时，改变背景颜色 */ button:hover { background-color: #f0f0f0; } /* 当按钮被点击时，改变背景颜色 */ button:active { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值