這篇文章將為大家詳細(xì)講解有關(guān)CSS3 :default偽類(lèi)選擇器怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè),成都做網(wǎng)站公司-創(chuàng)新互聯(lián)已向超過(guò)千家企業(yè)提供了,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)等服務(wù)!設(shè)計(jì)與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗(yàn),合理的價(jià)格為您打造企業(yè)品質(zhì)網(wǎng)站。

一、CSS3 :default偽類(lèi)選擇器簡(jiǎn)介

CSS3 :default 偽類(lèi)選擇器只能作用在表單元素上，表示默認(rèn)狀態(tài)的表單元素。

舉個(gè)例子，一個(gè)下拉框，可能有多個(gè)選項(xiàng)，我們默認(rèn)會(huì)讓某個(gè) <option> 處于 selected 狀態(tài)，此時(shí)這個(gè) <option> 可以看成是處于默認(rèn)狀態(tài)的表單元素（例如下面示意代碼的“選項(xiàng)4”），理論上可以應(yīng)用 :default 偽類(lèi)選擇器。

<select multiple>
    <option>選項(xiàng)1</option>
    <option>選項(xiàng)2</option>
    <option>選項(xiàng)3</option>
    <option selected>選項(xiàng)4</option>
    <option>選項(xiàng)5</option>
    <option>選項(xiàng)6</option>
</select>

假設(shè)CSS如下：

option:default {
    color: red;
}

則在Chrome瀏覽器下，當(dāng)我們選擇其他選項(xiàng)，此時(shí)就可以看到選項(xiàng)4是紅色了，效果如下圖：

 

Firefox瀏覽器下效果也是類(lèi)似：

 

IE瀏覽器則不支持。

因此，移動(dòng)端可以放心使用，桌面端不用管IE的項(xiàng)目也可以用起來(lái)。

二、CSS3 :default偽類(lèi)選擇器作用

CSS3 :default 偽類(lèi)選擇器作用設(shè)計(jì)的作用是讓用戶(hù)在選擇一組數(shù)據(jù)的時(shí)候，依然知道默認(rèn)選項(xiàng)是什么，否則其他選項(xiàng)一多，選著選著就不知道默認(rèn)提供的是哪個(gè)了，算是一種體驗(yàn)增強(qiáng)策略。作用不是很強(qiáng)烈，但是關(guān)鍵時(shí)刻卻很有用。

三、CSS3 :default偽類(lèi)選擇器一些特性研究

1. 研究1：JS快速修改會(huì)不會(huì)有影響？

測(cè)試代碼如下：

:default {
  transform: sclae(1.5);
}
<input type="radio" name="city" value="0">
<input type="radio" name="city" value="1" checked>
<input type="radio" name="city" value="2">
<script>
document.querySelectorAll('[type="radio"]')[2].checked = true;
</script>

也就是HTML設(shè)置的是第2個(gè)單選框放大1.5倍，JS立即瞬間設(shè)置第3個(gè)單選框選中，結(jié)果發(fā)現(xiàn)就算很快，哪怕是幾乎無(wú)延遲的JS修改， :default 偽類(lèi)選擇器的渲染依然不受影響。

 

因此，本題答案是無(wú)影響。

2. 研究2： <option> 如果沒(méi)有設(shè)置 selected 屬性，瀏覽器會(huì)默認(rèn)呈現(xiàn)第1個(gè) <option> ，此時(shí)第1個(gè) <option> 響應(yīng) :default 偽類(lèi)選擇器嗎？

例如：

option:default {
    color: red;
}
<select name="city">
    <option value="-1">請(qǐng)選擇</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">廣州</option>
    <option value="5">廈門(mén)</option>
</select>

結(jié)果第一個(gè) <option> 沒(méi)有紅色，如下圖，因此， :default 選擇器要想有作用，必須要 selected 為 true 。同樣的，對(duì)于單復(fù)選框， checked 值也要是 true 。

因此，本題答案是不會(huì)響應(yīng)。

四、CSS3 :default偽類(lèi)選擇器實(shí)際應(yīng)用

雖然說(shuō) :default 選擇器是用來(lái)標(biāo)記默認(rèn)狀態(tài)的，避免選擇混淆。但是實(shí)際上，在我看來(lái)，更有實(shí)用價(jià)值的應(yīng)該是“推薦標(biāo)記”。

現(xiàn)代web應(yīng)用越來(lái)越智能，有時(shí)候有些操作會(huì)智能給用戶(hù)push一些選擇，其中默認(rèn)將推薦的設(shè)置設(shè)為 checked 狀態(tài)，以前我們的做法是另外輸出文字“（推薦）”，現(xiàn)在有了 :default 選擇器，我們的實(shí)現(xiàn)可以變得更加簡(jiǎn)潔，也更容易維護(hù)。

您可以狠狠地的點(diǎn)擊這里： :default選擇器與自動(dòng)添加推薦字樣demo

效果如下圖：

 

點(diǎn)擊其他選項(xiàng)，“推薦”二字依然穩(wěn)固。以后，如果要更換推薦選項(xiàng)了，直接修改 input 的 checked 屬性就可以，維護(hù)更簡(jiǎn)單了。

相關(guān)CSS和HTML代碼如下：

input:default + label::after {
    content: '（推薦）';
}
<p><input type="radio" name="pay" id="pay0"> <label for="pay0">支付寶</label></p>
<p><input type="radio" name="pay" id="pay1" checked> <label for="pay1">微信</label></p>
<p><input type="radio" name="pay" id="pay2"> <label for="pay2">銀行卡</label></p>

關(guān)于“CSS3 :default偽類(lèi)選擇器怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站題目：CSS3:default偽類(lèi)選擇器怎么用
網(wǎng)頁(yè)鏈接：http://vcdvsql.cn/article42/iijjhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、全網(wǎng)營(yíng)銷(xiāo)推廣、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)