1、class 和 id 的使用場景?
- class是將一類元素的樣式抽取出來，它可以管控多個元素的樣式；如果要為兩個元素或者兩個以上元素定義相同的樣式，建議使用class屬性。
- id是唯一的，控制單個元素的樣式。如果一個頁面出現了多個相同id屬性取值，CSS選擇器或者JavaScript就會因為無法分辨要控制的元素而最終報錯。
2、CSS選擇器常見的有幾種?
- 元素選擇器
就是“選中”相同的元素，然后對相同的元素設置同一個CSS樣式。
- id選擇器
我們可以為元素設置一個id，然后針對這個id的元素進行CSS樣式操作。注意，在同一個頁面中，不允許出現兩個相同的id，這個就像沒有哪兩個人的身份證號是相同的道理。
PS：id名前面必須要加上前綴“#”，否則該選擇器無法生效。id名前面加上“#”，表明這是一個id選擇器。
- class選擇器：class選擇器，也就是“類選擇器”?？梢詫Α跋嗤脑亍被蛘摺安煌脑亍痹O置一個class（類名），然后針對這個class的元素進行CSS樣式操作。
class名前面必須要加上前綴“.”（英文點號），否則該選擇器無法生效。類名前面加上“.”，表明這是一個class選擇器。
- 子元素選擇器
子元素選擇器，就是選中某個元素下的子元素，然后對該子元素設置CSS樣式。
PS：父元素與子元素必須用空格隔開，從而表示選中某個元素下的子元素。
- 相鄰選擇器
就是選中該元素的下一個兄弟元素，在這里注意一點，相鄰選擇器的操作對象是該元素的同級元素。
- 群組選擇器
群組選擇器，就是同時對幾個選擇器進行相同的操作。常常，我們的CSS 樣式中會有好幾個地方需要使用到相同的設定時，一個一個分開寫會是一件滿累人的工作，重覆性太高且顯得冗長，更不好管理....在CSS 語法的基本設定中，就可以把這幾個相同設定的選擇器合并在一起，原本可能是寫了7~8 行相同的語法，合在一起后就只要短短的一小行
PS：對于群組選擇器，兩個選擇器之間必須用“,”（英文逗號）隔開，不然群組選擇器無法生效。
3、選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
- 在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內聯樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
- 復雜場景優先級計算
- 從最高權重開始比較，相同則比較下一個權重，權重高的優先級高于權重低的
4、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
a:link > a:visited > a:hover > a:active
如果visited寫在active后面，當a標簽被點擊之后，visited的樣式會覆蓋其他樣式，導致其他樣式都不生效
5、以下選擇器分別是什么意思?
6、列出你知道的偽類選擇器
- E:first-child：匹配元素E的第一個子元素
- E:nth-child：匹配元素E的第n個子元素
- E:enabled和E:disabled：匹配元素E的狀態為可用/不可用
- E:checked和E:selection：匹配元素E的狀態為單選框選中/復選框選中
- a:link：未被點擊的鏈接
- a:visited：已被點擊的鏈接
- a:hover：鼠標懸停其上的鏈接
- a:active：鼠標已經按下，但沒有釋放的鏈接
7、div:first-child和div:first-of-type的作用和區別
- div:first-child：匹配div父元素的第一個子元素。
- div:first-of-type：匹配div父元素下使用同種標簽的第一個子元素。有多少種不同的標簽就會匹配到多少個子元素。
8、運行如下代碼，解析下輸出樣式的原因。
.item1:first-child——
選擇.item1的父元素即.ct的第一個子元素，是其自身。所以aa字體變紅。.item1:first-of-type——選擇.item1的父元素即.ct的擁有相同標簽的第一個子元素。所以aa和bb背景色變藍。
