css3的:out-of-range和:in-range偽類怎么用

這篇文章主要介紹“css3的:out-of-range和:in-range偽類怎么用”，在日常操作中，相信很多人在css3的:out-of-range和:in-range偽類怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css3的:out-of-range和:in-range偽類怎么用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

　　css3:in-range偽類

　　:in-range偽類選擇器，用于對元素綁定的值在指定范圍限制內(nèi)時(shí)具有范圍限制的元素進(jìn)行樣式設(shè)置。

　　換句話說，當(dāng)它匹配元素的value屬性值在其指定的范圍限制內(nèi)時(shí)，可以設(shè)置這些匹配元素的樣式。

　　css3:out-of-range偽類

　　:out-of-range偽類選擇器，用來指定當(dāng)元素的有效值被限定在一段范圍之內(nèi)（使用min和max屬性來指定范圍），但實(shí)際輸入值在該范圍之外時(shí)使用的樣式。

　　注意：:in-range偽類選擇器和out-of-range偽類選擇器都是只作用于能指定區(qū)間值的元素；無法選擇任何其他沒有數(shù)據(jù)范圍限制或不是表單控件元素的元素。例如input元素中的min和max屬性：

　　<inputtype="number">

　　這樣的輸入將具有使用min和max屬性指定的可接受值范圍。該value屬性將保存輸入的當(dāng)前值。

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

　　說明：

　　與其他偽類選擇器一樣，:in-range偽類和:out-of-range都可以和其他選擇器一起連用，比如說:hover和:focus選擇器，當(dāng)元素的值在允許的范圍限制內(nèi)時(shí)，為元素提供懸停樣式；當(dāng)元素的值超出允許的范圍限制時(shí)，為元素提供焦點(diǎn)樣式。

　　input:in-range:hover{

　　cursor:help;

　　}

　　input:out-of-range:focus{

　　border:2pxsolidtomato;

　　}

　　css3:in-range偽類和:out-of-range偽類的示例：

　　以下示例使用:out-of-range和:in-range偽類選擇器在提供的值在指定范圍之內(nèi)或之外時(shí)對輸入進(jìn)行樣式設(shè)置。嘗試輸入超出指定范圍的值，以查看輸入的樣式是否更改。

　　html代碼：

　　<divclass="container">

　　<p>值在1和10以內(nèi)是，樣式為綠色；但只要值在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:"請輸入一個(gè)介于1和10之間的值！";

　　}

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

　　background-color:salmon;

　　border:1pxsolidtomato;

　　color:white;

　　}

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

　　content:"此值超出范圍，請重新輸入！";

　　color:tomato;

　　}

到此，關(guān)于“css3的:out-of-range和:in-range偽類怎么用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！