1、class 和 id 的使用場景?

• id：指定標籤的唯一標識。根據提供的唯一id號，快速獲取標籤物件。如：document.getElementById(id)。id屬性的值，在當前的page頁面要是唯一的。

• class：指定標籤的類名。CSS操作，把一些特定樣式放到一個class類中，需要此樣式的標籤，可以在新增此類。

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

1、基礎選擇器，包括：

• 通用元素選擇器，匹配頁面任何元素。示例：
  * { font-family: '微軟雅黑'; }

• id選擇器，匹配特定id的元素。示例：

  
  #id-selector{ color: #333; }

• 類選擇器，匹配class包含(不是等於)特定類的元素。示例：
  .class-selector{ background: #f1f1f1; }

• 標籤選擇器。示例：
  p { height: 50px; line-height: 50px; }

2、組合選擇器

|選擇器 | 含義 |
| -------- |:------------- -----:|
| E,F —多元素選擇器 | 用,分隔，同時匹配元素E或元素F |
| E F —後代選擇器 | 用空格分隔，匹配E元素所有的後代元素F |
| E>F —子元素選擇器 | 用空用>分隔，匹配E元素的所有直接子元素 |

3、屬性選擇器

|選擇器 | 含義 |
| -------- |:------------- -----:|
| E[attr] | 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div |

4、偽類選擇器

|選擇器 | 含義 |
| -------- |:------------- -----:|
| 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

5、偽元素選擇器

|選擇器 | 含義 |
| -------- |:------------- -----:|
| E::first-line | 匹配E元素內容的第一行 |
| E::first-letter| 匹配E元素內容的第一個字母 |
| E::before | 在E元素之前插入生成的內容 |
| E::after | 在E元素之後插入生成的內容 |

3、選擇器的優先順序是怎樣的?對於複雜場景如何計算優先順序？

從高到低分別是：

1、在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
2、作為style屬性寫在元素標籤上的內聯樣式
3、id選擇器
4、類選擇器、
5、偽類選擇器
6、屬性選擇器
7、標籤選擇器
8、萬用字元選擇器
9、瀏覽器自定義

對於複雜的情況，例如CSS規則由多個選擇器組成：

#test p.class1 {...}
#test .class1.class2 {...}

要計算諸如上述複雜場景的優先順序，這時候我們可以做個簡單的加法運算，id選擇器的權值為1000，class選擇器為100，標籤選擇器為10，做一下運算（當然只是為了形象這麼說，一萬個class選擇器加起來也不如一個id選擇器優先順序高）

這樣我們就能得知第二條的規則優先順序高一些，但是還有一種情況：

#parent p.class1
div #child.class1

<div id="parent"> <p id="child" class="class1"> Text </p> </div> 

按照我們剛才的方法計算，兩個的權值時相同的，這時候應該用那條規則呢？簡單來說一句話誰更具體用誰，也就是權值高的選擇器作用的越具體優先順序越高

我們可以看到兩個選擇器作用的元素都是p標籤，id選擇器權值最高，第一條規則作用在了父元素上，第二條規則直接作用在了p標籤本身上，所以我們認為第二條選擇器的優先順序高

如果兩個選擇器規權值就是一樣，我們改怎麼判斷呢？ 後面的覆蓋前面的！

div {color: #333;}
....
div {color: #666;} 

這樣div文案的顏色明顯會是#666

總而言之判斷CSS選擇器規則優先順序很簡單，每個選擇器本身有優先順序，越具體優先順序越高

4、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什麼？

a:link：
用來定義超連結被訪問前的樣式。
a:visited：
用來定義連結被訪問後的樣式。
a:hover:
用來定義滑鼠放到連結上，但滑鼠鍵未被按下時的樣式。
a:active:
用來定義滑鼠放到連線上，並被按下時的樣式。

正確的順序為 a:link、a:visited、a:hover、a:active (其中，link和visited可以互換)；

原因：

• 滑鼠經過的“未訪問連結”可應用a:link、a:hover、a:active 這三種偽類選擇器來定義樣式，因為後面的樣式會覆蓋前面的樣式，所以a:hover應放在a:link的後面，a:active放在最後。
• 滑鼠經過的“已訪問連結”可應用a:visited、a:hover、a:active這三種類選擇器來定義樣式，因為後面的樣式會覆蓋前面的樣式，所以a:hover應放在a:hovor的後面，a:active放在最後。

所以說，a:hover定義一定要放在a:link、a:visited的後面，a:active 放在最後。