1.class 和 id 的使用場景?
- id定位到頁面上唯一的元素；
- class定位到頁面上某一類的元素。
2.CSS選擇器常見的有幾種?
- 基礎選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
3.選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
CSS優先級
從高到低分別是
1.在屬性后面使用 !important會覆蓋頁面內任何位置定義的元素樣式
作為style屬性寫在元素標簽上的內聯樣式
2.id選擇器
3.類選擇器
4.偽類選擇器
5.屬性選擇器
6.標簽選擇器
7.通配符選擇器
8.瀏覽器自定義
對于復雜場景，根據組合選擇器按照以下規則統計各類選擇器的個數
- 行內樣式 <div style="xxx"></div> ==> a
- ID 選擇器 ==> b
- 類，屬性選擇器和偽類選擇器 ==> c
- 標簽選擇器、偽元素 ==> d
先比較a值的大小，a值大的則優先級高;如果a值相等，則再比較b值的大小，b值大的優先級高；以此類推。
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
1.a:link
2.a:visited
3.a:hover
4.a:active
如果不是這樣的順序，會產生樣式相互覆蓋，從而達不到預期效果。
5.以下選擇器分別是什么意思?
#header{ } 匹配id為header的元素；
.header{ } 匹配class為header的元素；
.header .logo{ } 匹配class為header，子類中class為logo的元素；
.header.mobile{ } 同時匹配class為header和mobile中的元素；
.header p, .header h3{ } 匹配class為header中子類為屁和h3的元素；
#header .nav>li{ } 匹配id為header中的class為nav下的li元素；
#header a:hover{ } 匹配id為header元素中子類元素a，鼠標放置其上所顯示的樣式；
#header .logo~p{ } 匹配id為header元素中，class="logo"下的同級標簽為p的所有元素;
#header input[type="text"]{ }匹配id為header的元素中的input 子元素中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 匹配用戶當前選中的元素；
E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素；
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1；
E:nth-last-child(n) 匹配其父元素的倒數第n個子元素，第一個編號為1；
E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標簽的元素；
E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標簽的元素；
E:last-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)；
E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)；
E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)；
E:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)；
E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)；
E:empty 匹配一個不包含任何子元素的元素，文本節點也被看作子元素
E:not(selector) 匹配不符合當前選擇器的任何元素。
n的取值
1，2，3，4，5；
2n+1, 2n, 4n-1；
odd, even；
-
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）
div:first-child匹配其父元素下第一個并且標簽為div的元素；
div:first-of-type匹配其父元素下使用div標簽的第一個元素；
div :first-child匹配div元素下的第一個子元素；
div :first-of-type匹配div元素下相同類型子元素的第一個； - 運行如下代碼，解析下輸出樣式的原因。
QQ圖片20170912211428.png
