課程目標

• 掌握常見 CSS 選擇器的用法
• 對選擇器優先級有一定認識

課程任務

1. CSS選擇器常見的有幾種?

1. id 選擇器
2. class 選擇器
3. 屬性選擇器，以某個屬性作為選擇依據。
4. 分組選擇器，可以對選擇器進行分組，被分組的選擇器對應的元素就有相同的樣式。用逗 號將需要分組的選擇器分開。
5. 派生選擇器，選擇某個元素下的子元素，通常用于作用域隔離。

CSS3常用選擇器：

• :first-of-type 從一組中選擇第一個元素
• :last-of-type 從一組中選擇最后一個元素

拓展閱讀：

1. CSS 選擇器
2. CSS 子元素選擇器

2. 選擇器的優先級是怎樣的?

從高到低分別是

1. 在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
2. 作為 style 屬性寫在元素標簽上的內聯元素。
3. id 選擇器
4. class 選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義

選得越精確，越快，權重就越高

3. class 和 id 的使用場景?

1. class 使用場景：CSS操作，把一些特定樣式放到一個 class 類中。
2. id 使用場景: 快速獲取標簽；或者用于充當 label 標簽 for 屬性的值。

4. 使用CSS選擇器時為什么要劃定適當的命名空間？

1. 提高代碼可讀性。
2. 便于維護

5. 以下選擇器分別是什么意思?

  #heder {} /* id 是 header的標簽 */
  .header {}  /* class 是 header 的標簽 */
  .header .logo {}  /* 派生選擇器，"父"是 .header ，“后代”是 .logo 的標簽 */
  .header.mobile {}  /* class 同時是 .header 和 .mobile 的標簽 */
  .header p, .header h3  /* 分組選擇器，同時選擇 “父”是.header “后代”是 p標簽  和 “父”是.header “后代”是 h3標簽 */
  #header .nav>li {}  /* “父”是#header “后代”是 .nav 的子標簽（注意跟，孫標簽區分） */
  #header a:hover {}  /* “父”是 #header “后代”是 a標簽的偽類 */

6. 列出你知道的偽類選擇器

• :hover
• :link
• :active
• :fist-child
• :first-of-type
• :nth-of-child()
• :nth-of-type()
• :last-child
• :last-of-type
• :focus

拓展閱讀：

CSS偽類選擇器

7. :first-child 和 :first-of-type 的作用和區別

:first-child 是選擇XX父元素的第一個且"對應的"子元素。（限定順序上的第一個）（若找不到該“對應的”子元素，此樣式無效）。

:first-of-type 是選擇XX父元素“對應類型”的第一個。（不限定是順序上的第一個）（可以同時有不同的類型 type ）

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

 <style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div> 

task8-8.png

• .item1:fisrt-child，對應(.item1)的child是第一個子元素p (其父元素是 .ct)。
  所以選擇<p class="item1">aa</p>。
• .item1:first-of-type，對應(.item)的 type 有p和h3。
  所以選擇<p class="item1">aa</a> 和 <h3 class="item1">bb</bb>。

9. text-align: center 的作用是什么，作用在什么元素上？能讓什么元素水平居中

text-align: center令元素水平居中，作用在塊級元素上，讓塊級元素內部的行內元素水平居中。

10. 如果遇到一個屬性想知道兼容性，在哪查看?

CanIUse