本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家带来的内容是介绍css3的:out-of-range和:in-range伪类有什么用?(代码示例),让大家了解: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 属性:
1 |
|
这样的输入将具有使用min和max属性指定的可接受值范围。该value属性将保存输入的当前值。
1 |
|
说明:
与其他伪类选择器一样,:in-range伪类和:out-of-range都可以和其他选择器一起连用,比如说:hover和:focus选择器,当元素的值在允许的范围限制内时,为元素提供悬停样式;当元素的值超出允许的范围限制时,为元素提供焦点样式。
1 2 3 4 5 6 |
|
css3 :in-range伪类和:out-of-range伪类的示例:
以下示例使用:out-of-range和:in-range伪类选择器在提供的值在指定范围之内或之外时对输入进行样式设置。尝试输入超出指定范围的值,以查看输入的样式是否更改。
html代码:
1 2 3 4 5 |
|
css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
运行效果:
我们使用:in-range伪类选择器选择和设置值在1到10的范围时,样式为绿色;但当值1~10之外时,样式为红色,以作警示提醒。
总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。相关视频教程推荐:css3教程!
以上就是css3的:out-of-range和:in-range伪类有什么用?(代码示例)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5实践-详细介绍CSS3中的几个属性text-shadow、box-shadow和border-radius
CSS3中background-clip实现图片裁切3种效果(代码实例 )
更多相关阅读请进入《CSS3》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者