一、class與id的使用場景

• class
  類選擇器，匹配class包含特定類的元素，可以管控多個含有相同類的元素；
• id
  id選擇器，匹配特定id的元素，id是唯一的。

二、CSS常見選擇器

基礎選擇器

• # 通用元素選擇器，匹配頁面所有元素；
• #id id選擇器，匹配特定id的元素；
• .class 類選擇器，匹配class包含（不是等于）特定類的元素；
• element 標簽選擇器，匹配相同的標簽。

組合選擇器

• E,F 多元素選擇器，用,分隔，同時匹配元素E和元素F；
• E F 后代選擇器，用空格分隔，匹配E元素所有的后代元素F；
• E>F 子元素選擇器，用>分隔，匹配E元素的所有直接子元素F；
• E+F 直接相鄰選擇器，匹配E元素之后相鄰的同級元素F；
• E~F 普通相鄰選擇器，匹配E元素之后所有的同級元素F（無論直接相鄰與否）；
• .class1.class2 匹配同時有class1和class2的元素，class1和class2直接沒有分隔；
• element#id 匹配具有id的element元素；

屬性選擇器

• E[attr] 匹配所有具有屬性attr的E元素，div[id]就能取到所有有id屬性的div元素；
• E[attr=value] 匹配所有attr屬性為value的元素；
• E[attr ~=value] 匹配所有屬性attr具有多個空格分隔，其中一個值為value的元素；
• E[attr ^=value] 匹配屬性attr的值以value開頭的元素；
• E[attr $=value] 匹配屬性attr的值以value結尾的元素；
• E[attr *=value] 匹配屬性attr的值包含value的元素；

偽類選擇器

• E:first-child 匹配元素E的第一個子元素；
• E:link 匹配所有未被點擊的鏈接；
• E:visited 匹配所有已被點擊的鏈接；
• E:active 匹配鼠標已經點下，還沒釋放的鏈接；
• E:hover 匹配鼠標懸停在上面的E元素；
• E:focus 匹配獲得當前焦點的E元素；
• E:lang(c) 匹配lang屬性等于c的E元素
• E:enabled 匹配表單中可用的元素；
• E:disabled 匹配表單中禁用的元素；
• E:checked 匹配表單中被選中的radio或checkbox元素；
• E::selection 匹配用戶當前選中的元素；
• E:nth-child(n) 匹配E元素的父元素的第n個子元素，從1開始計數，若該元素不是E元素，則不選擇；
• E:nth-last-child(n) 匹配E元素的父元素倒數第n個子元素，從1開始計數，若該元素不是E元素，則不選擇；
• E:nth-of-type(n) 匹配E元素的父元素的第n個E子元素，從1開始計數，且只計算E元素；
• E:nth-last-of-type(n) 匹配E元素的父元素倒數的第n個E子元素，從1開始計數，且只計算E元素；
• E:first-child 匹配E元素的父元素的第一個元素，若該元素不是E元素，則不選擇，等同于E:nth-child(1)；
• E:last-child 匹配E元素的父元素倒數的第一個元素，若該元素不是E元素，則不選擇，等同于E:nth-last-child(1)；
• E:first-of-type 等同于E:nth-of-type(1)
• E:last-of-type E:nth-last-of-type(1)
• E:only-child 匹配其父元素下僅有E這一個元素的E元素；
• E:only-of-type 匹配其父元素下僅有E這一個元素的標簽的E元素；
• E::first-line 匹配E元素內容的第一行；
• E::first-letter 匹配E元素內容的第一個字母；
• E::before 在E元素之前插入生成的內容；

<q>一些引用</q>, 他說, <q>比沒有好。</q>.

q::before { 
  content: "?";
  color: blue;
}

• E::after 在E元素之后插入生成的內容；

<q>一些引用</q>, 他說, <q>比沒有好。</q>.

q::after { 
  content: "?";
  color: red;
}

三、選擇器的優先級

從高到低分別是：

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

復雜場景下的比較

通過比較標簽數，先比較最高優先級的標簽數，數量多的優先級高，若最高優先級的標簽數相同，比較次一級的標簽數，以此類推。

四、a:link, a:hover, a:active, a:visited的順序

這四個選擇器優先級相同，考慮到a:visited靠下面的話，會覆蓋上面的a:hover, a:active，因此，合理的順序如下：

a:link{}
a:visited{}
a:hover{}
a:active{}

五、以下選擇器分別是什么意思？

#header{}
/*選擇id為header的元素*/
.header{}
/*選擇class為header的元素*/
.header .logo{}
/*選擇class為header的元素中，class為logo的后代元素*/
.header.mobile{}
/*選擇class包含header和mobile的元素*/
.header p, .header h3{}
/*選擇class為header的元素中后代p元素和h3元素*/
#header .nav>li{}
/*選擇id為header的元素中，class為nav的元素的后代li元素*/
#header a:hover{}
/*選擇id為header的元素中，后代a元素的hover狀態*/
#header .logo~p{}
/*選擇id為header的元素中，class為logo的后代元素之后所有的p元素*/
#header input[type="text"]{}
/*選擇id為header的元素中，input標簽中type屬性為text的元素*/

六、:first-child和:first-of-type

• E:first-child 匹配E元素的父元素的第一個元素，若該元素不是E元素，則不選擇；
• E:first-of-type 匹配E元素的父元素的第一個E子元素；

七、解析下面代碼

<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>

• .item1:first-child{color: red;} 選擇了其父元素第一個class為item的子元素，并將其顏色定為紅色，因此aa顯示為紅色；
• .item1:first-of-type{background: blue;} 選擇了其父元素下不同標簽中第一個class為item的子元素，并將其背景顏色定為藍色，因此p標簽和h3標簽的第一個元素的背景色為藍色。