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>內聯樣式>ID 選擇器>偽類>屬性選擇器>類選擇器>元素(型別)選擇器>通用選擇器（*）>瀏覽器自定義
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 屬性的元素新增樣式。
執行如下程式碼，解析下輸出樣式的原因。 first-child vs first-of-child
item1

ct-item2

ct-item1

ct-itmm1

ct-item2-item1

first-child vs first-of-child
item1

ct-item2

ct-item1

ct-itmm1

ct-item2-item1
:first-child和:first-of-type的作用和區別? :first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。 :first-of-type 匹配的是某父元素下相同型別子元素中的第一個。
如果遇到一個屬性想知道相容性，在哪檢視? 在caniuse.com中檢視。

CSS選擇器常見問題

相關文章