這篇文章主要為大家展示了“css中focus選擇器怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css中focus選擇器怎么用”這篇文章吧。

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋紗窗等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身定制品質(zhì)網(wǎng)站。

css:focus選擇器的簡(jiǎn)單介紹

:focus是css的一個(gè)偽類選擇器，可以用來(lái)選取獲得焦點(diǎn)的元素，然后為這些獲得焦點(diǎn)的元素設(shè)置樣式。

只要是可以接收鍵盤事件或其他用戶輸入的元素都可以:focus選擇器，大多數(shù)情況下:focus選擇器都是被使用在鏈接和表單元素上的。

例如：用戶單擊一個(gè)input輸入框獲取焦點(diǎn)，然后這個(gè)input輸入框的邊框樣式就會(huì)發(fā)生改變，和其他的輸入框區(qū)別開來(lái)，表明已被選中。

一般情況下，瀏覽器都會(huì)自動(dòng)在表單元素獲取焦點(diǎn)時(shí)給元素周圍添加輪廓，由瀏覽器添加的樣式是每個(gè)瀏覽器的默認(rèn)樣式，并且通常情況下，每個(gè)瀏覽器之間的默認(rèn)樣式看起來(lái)是不一樣。但為了頁(yè)面的整體美觀和瀏覽器的樣式兼容性，往往我們都需要修改獲得焦點(diǎn)時(shí)的元素樣式，把默認(rèn)樣式替換為我們自己的樣式。

這個(gè)時(shí)候我們就可以使用css:focus選擇器來(lái)設(shè)置瀏覽器在獲得焦點(diǎn)時(shí)的的元素默認(rèn)樣式。例：

input:focus{

outline:0;/*去除瀏覽器默認(rèn)樣式*/

border:2pxsolidpink;

}

說明：輪廓類似于邊框，但它們并不完全相同，我們需要通過outline屬性來(lái)設(shè)置它的樣式。例如：設(shè)置outline:0;來(lái)去除輪廓。

我們還可以把css:focus選擇器使用在鏈接上，例：

a:focus{

outline:0;

color：red;

}

注：

當(dāng)我們使用css:focus選擇器來(lái)鏈接樣式時(shí)，建議是在:link和:visited選擇器設(shè)置的樣式之后設(shè)置:focus樣式，否則:focus選擇器提供的樣式將被:link和:visited選擇器提供的樣式給覆蓋掉。

除了這三個(gè)偽類中，:hover和:active偽類也可以用來(lái)設(shè)置鏈接樣式，它們提供的樣式在:focus的樣式之后出現(xiàn)。

上面提到的順序，即：link，visited，focus，hover，active的順序是首選的，這樣可以確保在必要時(shí)應(yīng)用每個(gè)偽類的樣式，并且不會(huì)被另一個(gè)偽類的樣式覆蓋。例：

a:link{

color:#0099cc;

}

a:visited{

color:grey;

}

a:focus{

background-color:black;

color:white;

}

a:hover{

border-bottom:1pxsolid#0099cc;

}

a:active{

background-color:#0099cc;

color:white;

}

css:focus選擇器的示例：

在聚焦輸入和文本區(qū)域字段的背景顏色轉(zhuǎn)換為淺黃色突出顯示，帶有淺紅色邊框。

html代碼：

<divclass="container">

<divclass="form">

<inputtype="text"placeholder="背景會(huì)變黃">

<inputtype="text"placeholder="得到一個(gè)紅色的邊框">

<textareaname="area"id="area"cols="30"rows="10">聚焦這里,textarea文本框</textarea>

<button>按鈕</button>

</div>

</div>

css代碼

.container{

margin:40pxauto;

max-width:400px;

}

input,

textarea,

button{

padding:.5em;

display:block;

width:100%;

margin-bottom:.5em;

}

a:link{

color:deepPink;

}

/*:focusstyles*/

a:focus,

input:focus,

textarea:focus,

button:focus{

/*overridedefaultbrowseroutline*/

outline:0;

/*applyotherstyles*/

outline:2pxsolid#F47E58;

border-radius:5px;

}

input:focus,

textarea:focus{

background-color:#FFFF66;

}

以上是“css中focus選擇器怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：css中focus選擇器怎么用
標(biāo)題URL：http://www.chinadenli.net/article38/jdjesp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、App開發(fā)、ChatGPT、網(wǎng)站收錄、App設(shè)計(jì)、標(biāo)簽優(yōu)化

廣告

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