這篇文章將為大家詳細(xì)講解有關(guān)CSS3 :default偽類選擇器怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來(lái)，公司以
成都做網(wǎng)站、網(wǎng)站建設(shè)、系統(tǒng)開(kāi)發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、
平面廣告設(shè)計(jì)等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶近1000家，涉及國(guó)內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開(kāi)發(fā)經(jīng)驗(yàn)。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過(guò)專業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。
一、CSS3 :default偽類選擇器簡(jiǎn)介
CSS3 :default 偽類選擇器只能作用在表單元素上，表示默認(rèn)狀態(tài)的表單元素。
舉個(gè)例子，一個(gè)下拉框，可能有多個(gè)選項(xiàng)，我們默認(rèn)會(huì)讓某個(gè)
選項(xiàng)4
假設(shè)CSS如下：
option:default {
color: red;
}則在Chrome瀏覽器下，當(dāng)我們選擇其他選項(xiàng)，此時(shí)就可以看到選項(xiàng)4是紅色了，效果如下圖：
Firefox瀏覽器下效果也是類似：
IE瀏覽器則不支持。
因此，移動(dòng)端可以放心使用，桌面端不用管IE的項(xiàng)目也可以用起來(lái)。
二、CSS3 :default偽類選擇器作用
CSS3 :default 偽類選擇器作用設(shè)計(jì)的作用是讓用戶在選擇一組數(shù)據(jù)的時(shí)候，依然知道默認(rèn)選項(xiàng)是什么，否則其他選項(xiàng)一多，選著選著就不知道默認(rèn)提供的是哪個(gè)了，算是一種體驗(yàn)增強(qiáng)策略。作用不是很強(qiáng)烈，但是關(guān)鍵時(shí)刻卻很有用。
三、CSS3 :default偽類選擇器一些特性研究
1. 研究1：JS快速修改會(huì)不會(huì)有影響？
測(cè)試代碼如下：
:default {
transform: sclae(1.5);
}
也就是HTML設(shè)置的是第2個(gè)單選框放大1.5倍，JS立即瞬間設(shè)置第3個(gè)單選框選中，結(jié)果發(fā)現(xiàn)就算很快，哪怕是幾乎無(wú)延遲的JS修改， :default 偽類選擇器的渲染依然不受影響。
因此，本題答案是無(wú)影響。
2. 研究2：
例如：
option:default {
color: red;
}
請(qǐng)選擇
北京
上海
深圳
廣州
廈門
結(jié)果第一個(gè)
因此，本題答案是不會(huì)響應(yīng)。
四、CSS3 :default偽類選擇器實(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ì)智能給用戶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: '（推薦）';
}
支付寶
微信
銀行卡
關(guān)于“CSS3 :default偽類選擇器怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
分享標(biāo)題：CSS3:default偽類選擇器怎么用-創(chuàng)新互聯(lián)
URL分享：
http://weahome.cn/article/dpcpoj.html
重慶分公司
重慶分公司
