E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），且实际输入值在该范围内时使用的样式。
E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），但实际输入值在该范围之外时使用的样式。
代码清单19-27为一个E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例。示例页面中包含一个数值输入控件（type属性值为number的input元素），通过min属性值与max属性值限定元素内的有效输入数值为从1到100,通过E:in-range伪类选择器指定元素内的输入值在该范围内时元素背景色为白色，通过E:out-of-range伪类选择器指定元素内的输入值在该范围之外时元素背景色为红色。
代码清单19-27   E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

　　<title>http://www.manongjc.com/article/1339.html</title>

　　<style type="text/css">

　　input[type="number"]:in-range{

　　background-color: white;

　　}

　　input[type="number"]:out-of-range{

　　background-color: red;

　　}

　　</style>

　　</head>

　　<body>

　　<form>

    http://www.manongjc.com/article/1340.html

　　请输入1到100之内的数值：<input type=number min=0 max=100 >

　　</form>

　　</body>

　　</html>

E:in-range伪类选择器与E:out-of-range伪类选择器的更多相关文章

  1. 突破css选择器的局限，实现一个css地址选择器?

    首先看一个效果,注意地址栏的变化 然后思考一下,用css如何实现? css选择器的局限 选择器是css中的一大特色,用于选择需要添加样式的元素. 选择器的种类有很多,比如 元素选择器 p {color ...

  2. 【Java基础之Object类（一）】Java中Object类中的所有方法（toString、equals、hashCode、clone、finalize、wait和notify等）详解（转载）

    java中的hashcode.equals和toString方法都是基类Object的方法. 首先说说toString方法,简单的总结了下API说明就是:返回该对象的字符串表示,信息应该是简明但易于读 ...

  3. c#中@标志的作用 C#通过序列化实现深表复制 细说并发编程-TPL 大数据量下DataTable To List效率对比 【转载】C#工具类：实现文件操作File的工具类 异步多线程 Async .net 多线程 Thread ThreadPool Task .Net 反射学习

    c#中@标志的作用   参考微软官方文档-特殊字符@,地址 https://docs.microsoft.com/zh-cn/dotnet/csharp/language-reference/toke ...

  4. 第六种方式，python使用cached_property缓存装饰器和自定义cached_class_property装饰器，动态添加类属性（三），selnium webdriver类无限实例化控制成单浏览器。

    使用 from lazy_object_proxy.utils import cached_property,使用这个装饰器. 由于官方的行数比较少,所以可以直接复制出来用自己的. class cac ...

  5. java异常处理：建立exception包，建立Bank类，类中有变量double balance表示存款,Bank类的构造方法能增加存款，Bank类中有取款的发方法withDrawal(double dAmount),当取款的数额大于存款时,抛出InsufficientFundsException,取款数额为负数，抛出NagativeFundsException,如new Bank(100),

    建立exception包,建立Bank类,类中有变量double  balance表示存款,Bank类的构造方法能增加存款,Bank类中有取款的发方法withDrawal(double dAmount ...

  6. 12 哈希表相关类——Live555源码阅读(一)基本组件类

    12 哈希表相关类--Live555源码阅读(一)基本组件类 这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 ...

  7. 10 DelayQueue 延时队列类——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 www.cnblogs.com/oloroso/ 本文由乌合 ...

  8. 8 延时队列相关类——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/oloroso ...

  9. 4 Handler相关类——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. Handler相关类概述 处理程序相关类一共有三个,其没有派生继承关系,但是其有友元关系和使用关系 ...

  10. Java基础详解 （一）Java的类成员访问权限修饰词（以及类访问权限）

    在一个类的内部,其成员(包括成员变量和成员函数)能否被其他类所访问,取决于该成员的修饰词.Java的类成员访问权限修饰词有四类:private,无(默认情况下),protected和public.其权 ...

随机推荐

  1. [vijos P1391] 想越狱的小杉

    考前最后一题,竟然是第一次码SPFA,虽然这个算法早有耳闻,甚至在闻所未闻之前自己有过一个类似的想法,说白了就是广搜啊,但是敲起来还是第一次啊,而且这还不是真正意义上的SPFA. 完全按照自己想法来码 ...

  2. CSipSimple结构浅析

    最近做一个VOIP的项目,调研了CSipSimple.都说CSipSimple结构清晰,但是代码下下来看了一下,还是一头雾水,不知从何看起.于是想到从最简单的打电话开始,借助网上一篇博文"C ...

  3. ConvertFrom-String 命令研究

    -------先上个例子------- $aaa = @'0.027 0.034 0.834 0.1050.346 0.558 0.018 0.0780.001 0.997 0.001 0.0010. ...

  4. <Java中的继承和组合之间的联系和区别>

    //Java中的继承和组合之间的联系和区别 //本例是继承 class Animal { private void beat() { System.out.println("心胀跳动...& ...

  5. 电脑无法登陆ftp

    电脑无法登陆ftp,或者对于少数ftp能登陆,大多数不能登陆,用了一大堆ftp软件一样登陆不了.后来baidu了一下,发现是防火墙的问题.据说是Windows防火墙阻止了20/21端口的通信,说白了就 ...

  6. 对hbase的学习

    HBase,是Hadoop DataBase. 面向列的分布式数据库, 思想来源于Google的BigTable思想,它的目标是在廉价硬件构成的集群上管理超大规模的稀疏表. Hbase的物理结构 HB ...

  7. QT中给各控件增加背景图片(可缩放可旋转)的几种方法

    http://blog.csdn.net/liukang325/article/details/44832397 1. 给QPushButton 增加背景图片:背景图片可根据Button大小自由缩放. ...

  8. AMQP与RabbitMQ简介

    MQ(Message Queue,消息队列)是一种应用系统之间的通信方法.是通过读写出入队列的消息来通信(RPC则是通过直接调用彼此来通信的). 1.AMQP协议 在了解RabbitMQ之前,首先要了 ...

  9. BZOJ 3110 树套树 && 永久化标记

    感觉树套树是个非常高深的数据结构.从来没写过 #include <iostream> #include <cstdio> #include <algorithm> ...

  10. 图片过大导致OOM

    原文:http://www.codeceo.com/article/android-load-image-oom.html 一.分析 在加载图片过程中出现的OOM的几种情况: 1. 加载的图片过大 2 ...