今天小編就為大家?guī)硪黄猣ocus選擇器在css中的作用作的文章。小編覺得挺不錯(cuò)的，為此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)二道免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

css :focus選擇器的簡單介紹

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

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

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

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

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

input:focus{
    outline:0; /* 去除瀏覽器默認(rèn)樣式 */
    border: 2px solid pink;
}

效果圖：

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

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

a:focus {    
   outline: 0;    
   color：red;
}

注：

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

除了這三個(gè)偽類中，:hover和:active偽類也可以用來設(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: 1px solid #0099cc;
}

a:active {
    background-color: #0099cc;
    color: white;
}

css :focus選擇器的示例：

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

html代碼：

  

    
    
    聚焦這里,textarea文本框
    按鈕
  

css代碼

.container {
  margin: 40px auto;
  max-width: 400px;
}
input,
textarea,
button {
  padding: .5em;
  display: block;
  width: 100%;
  margin-bottom: .5em;
}
a:link {
  color: deepPink;
}
/* :focus styles */
a:focus,
input:focus,
textarea:focus,
button:focus {
  /* override default browser outline */

  outline: 0;
  /* apply other styles */

  outline: 2px solid #F47E58;
  border-radius: 5px;
}

input:focus,
textarea:focus {
  background-color: #FFFF66;
}

效果圖：

我們可以使用鍵盤的“tab”按鈕來切換輸入框，或單擊input和textarea字段來獲得焦點(diǎn)，查看一下:focus樣式。

瀏覽器支持

:focus偽類選擇器被Firefox，Safari，Opera或7+，IE瀏覽器7+，以及Android和iOS等所有主流瀏覽器的支持。

看完上訴內(nèi)容，你們對(duì)focus選擇器在css中的作用大概了解了嗎？如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！