css3的:out-of-range和:in-range伪类怎么用

这篇文章主要介绍“css3的:out-of-range和:in-range伪类怎么用”，在日常操作中，相信很多人在css3的:out-of-range和:in-range伪类怎么用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3的:out-of-range和:in-range伪类怎么用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　css3:in-range伪类

　　:in-range伪类选择器，用于对元素绑定的值在指定范围限制内时具有范围限制的元素进行样式设置。

　　换句话说，当它匹配元素的value属性值在其指定的范围限制内时，可以设置这些匹配元素的样式。

　　css3:out-of-range伪类

　　:out-of-range伪类选择器，用来指定当元素的有效值被限定在一段范围之内（使用min和max属性来指定范围），但实际输入值在该范围之外时使用的样式。

　　注意：:in-range伪类选择器和out-of-range伪类选择器都是只作用于能指定区间值的元素；无法选择任何其他没有数据范围限制或不是表单控件元素的元素。例如input元素中的min和max属性：

　　<inputtype="number">

　　这样的输入将具有使用min和max属性指定的可接受值范围。该value属性将保存输入的当前值。

　　<inputtype=“number”min=“1”max=“10”value=“8”>

　　说明：

　　与其他伪类选择器一样，:in-range伪类和:out-of-range都可以和其他选择器一起连用，比如说:hover和:focus选择器，当元素的值在允许的范围限制内时，为元素提供悬停样式；当元素的值超出允许的范围限制时，为元素提供焦点样式。

　　input:in-range:hover{

　　cursor:help;

　　}

　　input:out-of-range:focus{

　　border:2pxsolidtomato;

　　}

　　css3:in-range伪类和:out-of-range伪类的示例：

　　以下示例使用:out-of-range和:in-range伪类选择器在提供的值在指定范围之内或之外时对输入进行样式设置。尝试输入超出指定范围的值，以查看输入的样式是否更改。

　　html代码：

　　<divclass="container">

　　<p>值在1和10以内是，样式为绿色；但只要值在1和10之外，样式将是红色的。尝试将值更改为WITIN范围的值，以查看其样式更改。</p>

　　<inputid="range"type="number"min="1"max="10"value="12">

　　<labelfor="range"></label>

　　</div>

　　css代码：

　　body{

　　background-color:#F5F5F5;

　　color:#555;

　　font-size:1.1em;

　　font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;

　　}

　　.container{

　　margin:40pxauto;

　　max-width:700px;

　　}

　　input{

　　width:100px;

　　height:40px;

　　font-size:1.4em;

　　margin-right:.6em;

　　}

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

　　background-color:lightgreen;

　　color:green;

　　}

　　input:in-range+label::after{

　　content:"请输入一个介于1和10之间的值！";

　　}

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

　　background-color:salmon;

　　border:1pxsolidtomato;

　　color:white;

　　}

　　input:out-of-range+label::after{

　　content:"此值超出范围，请重新输入！";

　　color:tomato;

　　}

到此，关于“css3的:out-of-range和:in-range伪类怎么用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！