選取器常見的有哪幾種？
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中文網其它相關文章！
相關閱讀：
JavaScript數組-字串-數學函數
簡易的CSS3點擊響應動畫案列
jquery的DOM與事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
