CSS的選取器有哪些常見問題

最後更新：2018-03-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這次給大家帶來CSS的選取器有哪些常見問題，處理CSS的選取器常見問題的注意事項有哪些，下面就是實戰案例，一起來看一下。

選取器常見的有哪幾種？
1.標籤選取器
p{ }/選擇標籤名為p的元素/
2.類別選取器
.box{ }/選擇class名為box的元素/
3.ID選取器
#header{ }/選擇id名為header的元素/
1.4萬用字元選取器
{ }/選擇頁面中所有的元素/
1.5選取器首碼
div.bd{}/選中class名為bd且標籤為div的元素/
1.6屬性選取器
[disabled]{}/選擇帶有屬性disabled的所有元素*/

選取器的優先順序是怎樣的?
！important>內聯樣式>識別碼選取器>偽類>屬性選取器>類別選取器>元素(類型)選取器>通用選取器（*）>瀏覽器自訂

class 和 id 的使用情境?
id根據提供的唯一id號，快速擷取標籤對象。class把一些特定樣式放到一個class類中，需要此樣式的標籤，可以在添加此類。

使用CSS選取器時為什麼要劃定適當的命名空間？
為了防止樣式汙染。

以下選取器分別是什麼意思?

#header{}/選擇id名為header的元素/.header{}/選擇class名為header的元素/.header .logo{}/選擇名為header元素內所有名為logo的元素/.header.mobile{}/選擇class名為header且為mobile的元素/.header p, .header h3{}/選擇class名為header內所有的p標籤和h3標籤/#header .nav>li{}/選擇祖父元素id名為header內父元素class名為nav的標籤下/#header a:hover{}/選擇祖父元素id名為header內a標籤被hover的元素/

列出你知道的偽類別選取器
:active 向被啟用的元素添加樣式。
:focus 向擁有鍵盤輸入焦點的元素添加樣式。
:hover 當滑鼠懸浮在元素上方時，向元素添加樣式。
:link 向未被訪問的連結添加樣式。
:visited 向已被訪問的連結添加樣式。
:first-child 向元素的第一個子項目添加樣式。
:lang 向帶有指定 lang 屬性的元素添加樣式。

運行如下代碼，解析下輸出樣式的原因。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>first-child  vs first-of-child</title><style>/選中.item1,該元素是它父親的第一個孩子/.item1:first-of-type{background: red;}/選中.item1,該元素是它父親所有的 .item1孩子中的第一個/.item1:first-child{color: blue;}</style></head><body><div class="item1">item1</div><div class="ct"><div class="item2">ct-item2</div><div class="item1">ct-item1</div><div class="item1">ct-itmm1</div><div class="item2"><div class="item1">ct-item2-item1</div></div></div></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><title>first-child  vs first-of-child</title><style>/選中.item1,該元素是它父親的第一個孩子/.item1:first-of-type{background: red;}/選中.item1,該元素是它父親所有的 .item1孩子中的第一個/.item1:first-child{color: blue;}</style></head><body><div class="item1">item1</div><div class="ct"><p class="item2">ct-item2</p><div class="item1">ct-item1</div><div class="item1">ct-itmm1</div><div class="item2"><div class="item1">ct-item2-item1</div></div></div></body></html>

:first-child和:first-of-type的作用和區別?
:first-child 匹配的是某父元素的第一個子項目，可以說是結構上的第一個子項目。
:first-of-type 匹配的是某父元素下相同類型子項目中的第一個。

如果遇到一個屬性想知道相容性，在哪查看?
在caniuse.com中查看。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More