css3中:超出范围和:范围内伪类的作用

　　介绍

这篇文章主要介绍css3中:超出范围和:范围内伪类的作用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强> css3:范围内伪类

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

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

<强> css3:超出范围伪类

:超出范围伪类选择器,用来指定当元素的有效值被限定在一段范围之内(使用min和max属性来指定范围),但实际输入值在该范围之外时使用的样式。

:范围内伪类选择器和超出范围伪类选择器都是只作用于能指定区间值的元素,无法选择任何其他没有数据范围限制或不是表单控件元素的元素,例如输入元素中的min和max属性:

& lt;输入类型=皀umber"在

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

& lt;输入类型="数量" min=" 1 " max=" 10 " value=https://www.yisu.com/zixun/" 8 ">

与其他伪类选择器一样,<强>:范围内伪类和:超出范围都可以和其他选择器一起连用强,比如说:悬停和:焦点选择器,当元素的值在允许的范围限制内时,为元素提供悬停样式;当元素的值超出允许的范围限制时,为元素提供焦点样式。

输入:范围内:{徘徊 　　光标:帮助; 　　} 　　输入超出范围:{焦点 　　边界:2 px固体番茄; 　　}

<强>

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

html代码:

& lt; div类=癱ontainer"比; 　　& lt; p>值在1和10以内是,样式为绿色;但只要值在1和10之外,样式将是红色的。尝试将值更改为WITIN范围的值,以查看其样式更改。;/p> 　　& lt;输入id=皉ange"类型=皀umber"min=?”;max=?0“;值=https://www.yisu.com/zixun/" 12 "> 　　<标签="范围"> 标签