圖片.png
1 .類選擇器和id選擇器都用于對html標簽進行css樣式設置，但用于不同場景。
| 相同點 | 不同點 |
|---|---|
| 可以應用于任何元素 | ID選擇器只能在文檔中使用一次，類選擇器可以使用多次。 |
2 . css選擇器常見的有一下幾種：
| 類型 | 例子 |
|---|---|
| 類選擇器 | .{ }; |
| id選擇器 | #{ }； |
| 標簽選擇器 | p{ }; |
| 通用選擇器 | *{ }； |
| 偽類選擇器 | a:hover{ }； |
| 組合選擇器 | E F{ }; E,F{ };等 |
| 屬性選擇器 | E[atter]; |
| 為元素選擇器 | E::first-line; |
注：以上只是簡單羅列幾種常見的選擇器，選擇器還有很多種，比如偽類選擇器和通用選擇器、組合選擇器有好幾種，這里只列舉一種。
3 . 選擇器的優先級是這樣的
如果多條規則作用于同一個元素上，且定義的相同屬性的不同值，比如
<style>
#test {color: #666;}
p {color: #333;}
</style>
<p id="text">Text</p>
這種場景下，p元素文本顏色應該是哪個呢？
從高到低分別是：
在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
作為style屬性寫在元素標簽上的內聯樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標簽選擇器
通配符選擇器
瀏覽器自定義
對于復雜場景選擇器的優先級
行內樣式 <div style="xxx"></div> ==> a
ID 選擇器 ==> b
類，屬性選擇器和偽類選擇器 ==> c
標簽選擇器、偽元素 ==> d
4 . a:link,a:hover,a:active,a:visided選擇器的順序是根據實際需求來排布的，不同的排布方式產生的效果是不一樣的。
a:link----正常狀態（默認狀態）下的屬性；
a:hover----鼠標滑過時的屬性；
a:active------鼠標點擊時的屬性；
a:visided-----訪問后的屬性。
正確的順序是： a:link、a:visited、a:hover、a:active。
5 . 以下選擇器是什么意思？
圖片.png
| 代碼 | 選擇器類型 |
|---|---|
| #header{} | id選擇器，id=header |
| .header{} | class選擇器，class=header |
| .header .logo{} | class組合選擇器,class=header,class=logo |
| .header.mobile{} | class組合選擇器，class=header，class=mobile |
| .header p, .header h3{} | 多元素選擇器.header的子元素p和h3 |
| #header .nav>li{} | 子元素選擇器，#header和.nav的所有直接子元素li |
| #header a:hover{} | 后代選擇器，#header的所有后代a:hover |
| #header .logo~p{} | 統計選擇器，#header和.logo后的所有普通相鄰元素 |
| #header input[type="text"]{} | 屬性選擇器，匹配所有具有type=“text”屬性的元素 |
列出你知道的偽類選擇器：
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配作為長子（第一個子女）的元素E |
| E:link | 匹配所有未被點擊的鏈接 |
| E:visited | 匹配所有已被點擊的鏈接 |
| E:active | 匹配鼠標已經其上按下、還沒有釋放的E元素 |
| E:hover | 匹配鼠標懸停其上的E元素 |
| E:focus | 匹配獲得當前焦點的E元素 |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
| E:enabled | 匹配表單中可用的元素 |
| E:disabled | 匹配表單中禁用的元素 |
| E:checked | 匹配表單中被選中的radio或checkbox元素 |
| E::selection | 匹配用戶當前選中的元素 |
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）
| div:first-child | 匹配父元素下，作為第一個子元素的div元素 |
|---|---|
| div :first-child | 匹配所有div元素內所有元素中屬于其父元素的首個子元素 |
| div:first-of-type | 匹配父元素的子元素中，第一個div元素 |
| div :first-of-type | 匹配所有div元素內所有元素中屬于其父元素的首個類型的子元素 |
first-child必須是div的第一個子元素，且符合指定的類型才可被選中；first-of-type首先div下的子元素要符合類型，其次要是類型中的第一個才可以被選中。
運行如下代碼，解析下輸出樣式的原因。
<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>
圖片.png
如上圖所示，.item:first-child{color： red；}表示對class為item1的第一個子元素添加紅色，而class item1的第一個子元素aa,所以aa變為紅色；.item:first-of-type{background： blue；}表示對class下的子元素中的不同類型的第一個添加樣式，aa和bb都是不同類型的第一個，而ccc是h3標簽的第二個元素所以沒有被選中，只有aa和bb的背景變成了藍色。
