任務8-CSS選擇器

一、CSS選擇器常見的有幾種?

1.元素選擇器 h1{color:red;},p{color:blue;};
2.分組選擇器 h1,h2,h3,p{color:red;};
3.class選擇器 .new{background:#ccc;};
4.id選擇器 #new{background:red;};
5.屬性選擇器 a[href] {color:red;}；
6.後代選擇器：div p{font-size:16px;}
7.直接子元素選擇器：div>p{font-size:16px;}（父元素下面的第一個子元素）；
8.相鄰元素選擇器：li+li{font-weight:bold;}(同級相鄰元素)；
9.偽類選擇器：

• a:hover{color:red}當滑鼠懸浮在元素上方時，向元素新增樣式；
• a:first-child{color:red}向元素的第一個子元素新增樣式；

10.CSS3新新增的選擇器：

• :first of type 從一組中選擇第一個元素新增樣式；
• :last of type 從一組中選擇最後一個元素新增樣式；

二、選擇器的優先順序是怎樣的?

排名：
1.在樣式裡面定義！important優先順序最高；
2.id選擇器；
3.class選擇器；
4.偽類選擇器；
5.屬性選擇器；
6.元素選擇器；

三、class 和 id 的使用場景?

1.id適用於整體區域大區塊的佈局，一個id只能使用一次；
2.class適用於區塊內部的小部分佈局，樣式的設定，可以重複使用；

四、使用CSS選擇器時為什麼要劃定適當的名稱空間？

1.保證程式碼的可讀性和易維護；
2.符合語義化；

五、以下選擇器分別是什麼意思?

1、#header{} 元素命名為header的佈局樣式；
2、.header{} 元素為類名header的佈局樣式；
3、.header .logo{} 類名為header元素下面的子元素class=logo的樣式；
4、.header .mobile{} 類名為header元素下面的子元素class=mobile的樣式；
5、.header p, .header h3{} 類名為header元素下面的子元素p和h3的樣式；
6、#header .nav>li{} 元素命名為header下面的子元素class=nav下面的第一個子元素li的樣式；
7、#header a:hover{} 當滑鼠懸浮在命名為header的元素下面時子元素a的樣式；

六、列出你知道的偽類選擇器

1. :active 向被啟用元素新增樣式；
2. :focus 向擁有鍵盤輸入焦點的元素新增樣式；
3. :hover 當滑鼠懸浮在元素上方時，向元素新增樣式；
4. :link 向未被訪問的連結新增樣式；
5. :visited 向已被訪問的連結新增樣式；
6. :first-child 向元素的第一個子元素新增樣式；
7. :lang 向帶有指定 lang 屬性的元素新增樣式；
8. :first of type 從一組中選擇第一個元素新增樣式；
9. :last of type 從一組中選擇最後一個元素新增樣式；

七、:first-child和:first-of-type的作用和區別

1.作用：

• p:first-child 匹配到的是p元素,因為p元素是div的第一個子元素；
• h1:first-child 匹配不到任何元素，因為在這裡h1是div的第二個子元素，而不是第一個；
• span:first-child 匹配不到任何元素，因為在這裡兩個span元素都不是 -div的第一個子元素；

• p:first-of-type 匹配到的是p元素,因為p是div的所有型別為p的子元素中的第一個；
• h1:first-of-type 匹配到的是h1元素，因為h1是div的所有型別為h1的子元素中的第一個；
• span:first-of-type 匹配到的是第三個子元素span。這裡div有兩個為span的子元素，匹配到的是它們中的第一個。

2.區別

• :first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素；
• :first-of-type 匹配的是某父元素下相同型別子元素中的第一個，比如 p:first-of-type，就是指所有型別為p的子元素中的第一個。這裡不再限制是第一個子元素了，只要是該型別元素的第一個就行了；

ps：答案引用部落格園的一篇文章，簡單好理解。

八、執行如下程式碼，解析下輸出樣式的原因。

原因：

• .item1:first-child 匹配的是父元素的第一個子元素，所以只有aa變成了紅色；
• .item1:first-of-child 是指父元素中所有元素為p和h3的第一個，所以aa和bb的背景色變為藍色；

九、text-align: center的作用是什麼，作用在什麼元素上？能讓什麼元素水平居中

1.作用：文字水平居中；
2.作用在行內元素上；
3.新增了樣式為display:inline-block的塊狀元素；

十、如果遇到一個屬性想知道相容性，在哪檢視?

網站：http://caniuse.com/

本教程版權歸本人和飢人谷所有，轉載須說明來源