1、class 和 id 的使用場景?

• class是將一類元素的樣式抽取出來，它可以管控多個元素的樣式；如果要為兩個元素或者兩個以上元素定義相同的樣式，建議使用class屬性。
• id是唯一的，控制單個元素的樣式。如果一個頁面出現(xiàn)了多個相同id屬性取值，CSS選擇器或者JavaScript就會因為無法分辨要控制的元素而最終報錯。

2、CSS選擇器常見的有幾種?

• 元素選擇器
  就是“選中”相同的元素，然后對相同的元素設置同一個CSS樣式。

• id選擇器
  我們可以為元素設置一個id，然后針對這個id的元素進行CSS樣式操作。注意，在同一個頁面中，不允許出現(xiàn)兩個相同的id，這個就像沒有哪兩個人的身份證號是相同的道理。

PS：id名前面必須要加上前綴“#”，否則該選擇器無法生效。id名前面加上“#”，表明這是一個id選擇器。

• class選擇器：class選擇器，也就是“類選擇器”?？梢詫Α跋嗤脑亍被蛘摺安煌脑亍痹O置一個class（類名），然后針對這個class的元素進行CSS樣式操作。

class名前面必須要加上前綴“.”（英文點號），否則該選擇器無法生效。類名前面加上“.”，表明這是一個class選擇器。

• 子元素選擇器
  子元素選擇器，就是選中某個元素下的子元素，然后對該子元素設置CSS樣式。

PS：父元素與子元素必須用空格隔開，從而表示選中某個元素下的子元素。

• 相鄰選擇器
  就是選中該元素的下一個兄弟元素，在這里注意一點，相鄰選擇器的操作對象是該元素的同級元素。

• 群組選擇器
  群組選擇器，就是同時對幾個選擇器進行相同的操作。常常，我們的CSS 樣式中會有好幾個地方需要使用到相同的設定時，一個一個分開寫會是一件滿累人的工作，重覆性太高且顯得冗長，更不好管理....在CSS 語法的基本設定中，就可以把這幾個相同設定的選擇器合并在一起，原本可能是寫了7~8 行相同的語法，合在一起后就只要短短的一小行

PS：對于群組選擇器，兩個選擇器之間必須用“,”（英文逗號）隔開，不然群組選擇器無法生效。

3、選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級？

• 在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
• 作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式
• id選擇器
• 類選擇器
• 偽類選擇器
• 屬性選擇器
• 標簽選擇器
• 通配符選擇器
• 瀏覽器自定義
• 復雜場景優(yōu)先級計算
• 從最高權重開始比較，相同則比較下一個權重，權重高的優(yōu)先級高于權重低的

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的狀態(tài)為可用/不可用
• E:checked和E:selection：匹配元素E的狀態(tài)為單選框選中/復選框選中
• a:link：未被點擊的鏈接
• a:visited：已被點擊的鏈接
• a:hover：鼠標懸停其上的鏈接
• a:active：鼠標已經(jīng)按下，但沒有釋放的鏈接

7、div:first-child和div:first-of-type的作用和區(qū)別

• div:first-child：匹配div父元素的第一個子元素。
• div:first-of-type：匹配div父元素下使用同種標簽的第一個子元素。有多少種不同的標簽就會匹配到多少個子元素。

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

• .item1:first-child——
  選擇.item1的父元素即.ct的第一個子元素，是其自身。所以aa字體變紅。

• .item1:first-of-type——選擇.item1的父元素即.ct的擁有相同標簽的第一個子元素。所以aa和bb背景色變藍。