小編給大家分享一下CSS3中default偽類選擇器怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
為藍山等地區(qū)用戶提供了全套網頁設計制作服務，及藍山網站建設行業(yè)解決方案。主營業(yè)務為成都網站設計、成都做網站、藍山網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
一、CSS3 :default偽類選擇器簡介
CSS3 :default 偽類選擇器只能作用在表單元素上，表示默認狀態(tài)的表單元素。
舉個例子，一個下拉框，可能有多個選項，我們默認會讓某個
選項4
假設CSS如下：
option:default {
color: red;
}則在Chrome瀏覽器下，當我們選擇其他選項，此時就可以看到選項4是紅色了，IE瀏覽器則不支持。
因此，移動端可以放心使用，桌面端不用管IE的項目也可以用起來。
二、CSS3 :default偽類選擇器作用
CSS3 :default 偽類選擇器作用設計的作用是讓用戶在選擇一組數(shù)據(jù)的時候，依然知道默認選項是什么，否則其他選項一多，選著選著就不知道默認提供的是哪個了，算是一種體驗增強策略。作用不是很強烈，但是關鍵時刻卻很有用。
三、CSS3 :default偽類選擇器一些特性研究
1. 研究1：JS快速修改會不會有影響？
測試代碼如下：
:default {
transform: sclae(1.5);
}
也就是HTML設置的是第2個單選框放大1.5倍，JS立即瞬間設置第3個單選框選中，結果發(fā)現(xiàn)就算很快，哪怕是幾乎無延遲的JS修改， :default 偽類選擇器的渲染依然不受影響。
因此，本題答案是無影響。
2. 研究2：
例如：
option:default {
color: red;
}
請選擇
北京
上海
深圳
廣州
廈門
結果第一個
因此，本題答案是不會響應。
四、CSS3 :default偽類選擇器實際應用
雖然說 :default 選擇器是用來標記默認狀態(tài)的，避免選擇混淆。但是實際上，在我看來，更有實用價值的應該是“推薦標記”。
現(xiàn)代web應用越來越智能，有時候有些操作會智能給用戶push一些選擇，其中默認將推薦的設置設為 checked 狀態(tài)，以前我們的做法是另外輸出文字“（推薦）”，現(xiàn)在有了 :default 選擇器，我們的實現(xiàn)可以變得更加簡潔，也更容易維護。
您可以狠狠地的點擊這里： :default選擇器與自動添加推薦字樣demo
效果如下圖：
點擊其他選項，“推薦”二字依然穩(wěn)固。以后，如果要更換推薦選項了，直接修改 input 的 checked 屬性就可以，維護更簡單了。
相關CSS和HTML代碼如下：
input:default + label::after {
content: '（推薦）';
}
支付寶
微信
銀行卡
以上是“CSS3中default偽類選擇器怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享名稱：CSS3中default偽類選擇器怎么用
轉載源于：
http://weahome.cn/article/ighjdd.html
重慶分公司
重慶分公司
