亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

首頁(yè) web前端 H5教程 CSS3的default偽類選擇器使用詳解

CSS3的default偽類選擇器使用詳解

Mar 20, 2018 pm 01:38 PM
css3 default

這次帶給大家CSS3的default偽類別選擇器使用詳解,使用CSS3的default偽類別選擇器的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。

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

#CSS3 :default 偽類別選擇器只能作用在表單元素上,表示預(yù)設(shè)狀態(tài)的表單元素。

舉個(gè)例子,一個(gè)下拉框,可能有多個(gè)選項(xiàng),我們預(yù)設(shè)會(huì)讓某個(gè)

<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瀏覽器下效果也是類似:

#?

IE瀏覽器則不支援。

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

二、CSS3 :default偽類別選擇器作用

CSS3 :default 偽類別選擇器作用設(shè)計(jì)的作用是讓使用者在選擇一組資料的時(shí)候,依然知道預(yù)設(shè)選項(xiàng)是什麼,否則其他選項(xiàng)一多,選著選著就不知道預(yù)設(shè)提供的是哪一個(gè)了,算是一種體驗(yàn)增強(qiáng)策略。作用不是很強(qiáng)烈,但是關(guān)鍵時(shí)刻很有用。

三、CSS3 :default偽類別選擇器一些特性研究

#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 偽類選擇器的渲染依然不受影響。

?

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

2. 研究2:

例如:

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">廈門</option>
</select>

結(jié)果第一個(gè)

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

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

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

現(xiàn)代web應(yīng)用程式越來(lái)越智能,有時(shí)候有些操作會(huì)智能給用戶push一些選擇,其中預(yù)設(shè)將推薦的設(shè)定設(shè)為checked 狀態(tài),以前我們的做法是另外輸出文字“(建議)” ,現(xiàn)在有了:default 選擇器,我們的實(shí)作可以變得更加簡(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>

相信看了本文案例你已經(jīng)掌握了方法,更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!

推薦閱讀:

前端技術(shù)實(shí)現(xiàn)文本文字紋理疊加

CSS3混合模式使用詳解

以上是CSS3的default偽類選擇器使用詳解的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願(yuàn)投稿,版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容,請(qǐng)聯(lián)絡(luò)admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費(fèi)脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費(fèi)的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級(jí)程式碼編輯軟體(SublimeText3)

熱門話題

Laravel 教程
1597
29
PHP教程
1488
72
純CSS3怎麼實(shí)現(xiàn)波浪效果? (程式碼範(fàn)例) 純CSS3怎麼實(shí)現(xiàn)波浪效果? (程式碼範(fàn)例) Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實(shí)現(xiàn)波浪效果?這篇文章就來(lái)跟大家介紹一下使用 SVG 和 CSS 動(dòng)畫(huà)來(lái)製作波浪效果的方法,希望對(duì)大家有幫助!

巧用CSS實(shí)現(xiàn)各種奇形怪狀按鈕(附代碼) 巧用CSS實(shí)現(xiàn)各種奇形怪狀按鈕(附代碼) Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實(shí)現(xiàn)高頻出現(xiàn)的各類奇形怪狀按鈕,希望對(duì)大家有幫助!

css怎麼隱藏元素但不佔(zhàn)空間 css怎麼隱藏元素但不佔(zhàn)空間 Jun 01, 2022 pm 07:15 PM

兩種方法:1、利用display屬性,只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設(shè)定元素絕對(duì)定位來(lái)隱藏元素,只需為元素加上「position:absolute;top:-9999px;」樣式。

css3如何實(shí)現(xiàn)滑鼠點(diǎn)擊圖片放大 css3如何實(shí)現(xiàn)滑鼠點(diǎn)擊圖片放大 Apr 25, 2022 pm 04:52 PM

實(shí)作方法:1、使用「:active」選擇器選取滑鼠點(diǎn)擊圖片的狀態(tài);2、使用transform屬性和scale()函數(shù)實(shí)現(xiàn)圖片放大效果,語(yǔ)法「img:active {transform: scale(x軸放大倍率,y軸放大倍率);}」。

原來(lái)利用純CSS也能實(shí)現(xiàn)文字輪播與圖片輪播! 原來(lái)利用純CSS也能實(shí)現(xiàn)文字輪播與圖片輪播! Jun 10, 2022 pm 01:00 PM

怎麼製作文字輪播與圖片輪播?大家第一想到的是利用js,其實(shí)利用純CSS也能實(shí)現(xiàn)文字輪播與圖片輪播,下面來(lái)看看實(shí)作方法,希望對(duì)大家有幫助!

css3怎麼實(shí)現(xiàn)花邊邊框 css3怎麼實(shí)現(xiàn)花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中,可以利用border-image屬性來(lái)實(shí)作花邊邊框。 border-image屬性可以使用圖片來(lái)建立邊框,即給邊框加上背景圖片,只需要將背景圖片指定為花邊樣式即可;語(yǔ)法「border-image: url(圖片路徑) 向內(nèi)偏移值圖像邊界寬度outset 是否重複;」。

css3怎麼設(shè)定動(dòng)畫(huà)旋轉(zhuǎn)速度 css3怎麼設(shè)定動(dòng)畫(huà)旋轉(zhuǎn)速度 Apr 28, 2022 pm 04:32 PM

在css3中,可以利用「animation-timing-function」屬性來(lái)設(shè)定動(dòng)畫(huà)旋轉(zhuǎn)速度,該屬性用於指定動(dòng)畫(huà)將如何完成一個(gè)週期,設(shè)定動(dòng)畫(huà)的速度曲線,語(yǔ)法為「元素{animation-timing-function:速度屬性值;}」。

css3線性漸層可以實(shí)現(xiàn)三角形嗎 css3線性漸層可以實(shí)現(xiàn)三角形嗎 Apr 25, 2022 pm 02:47 PM

css3線性漸變可以實(shí)現(xiàn)三角形;只需創(chuàng)建一個(gè)45度的線性漸變,設(shè)定漸變色為兩種固定顏色,一個(gè)是三角形的顏色,另一個(gè)為透明色即可,語(yǔ)法「linear-gradient(45deg,顏色值,顏色值50%,透明色50%,透明色100%)」。

See all articles