class 和 id 的使用場景?

class

指定標簽的類名。

• 格式：<input type=button class="btnsubmit" />
• 應用場景： ①CSS操作，把一些特定樣式放到一個class類中，需要此樣式的標簽，可以在添加此類。
• 特性： 可以把多個類，放在一個class屬性里，但必須用空格隔開；如：class='btnsubmit btnopen'

id

指定標簽的唯一標識。

• 格式：<input type=password id="userpwd" />
• 應用場景： ①根據提供的唯一id號，快速獲取標簽對象。如：document.getElementById(id)
  ②用于充當label標簽for屬性的值：示例：<label for='userid'>用戶名：</label>，表示單擊此label標簽時，id為userid的標簽獲得焦點。
• 特性 id屬性的值，在當前的page頁面要是唯一的。

CSS常見選擇器

Paste_Image.png

選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？

• 優先級從大到小

！Important>行內樣式>Id>類>標簽>通配符>繼承>瀏覽器默認（用戶代理）

• 選擇器混合作用 通過權重來進行比較。

=

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

在實際使用中，順序為a:link，a:visited，a:hover，a:active。因為當鏈接點擊過后，a:visited狀態就激活了，按照優先級原則，它們四個是相同的，這時就看誰最后聲明，就會覆蓋前面的樣式。如果a:visited放在第三位，a:hover將被覆蓋，a:visited放在最后則a:hover和a:active將被覆蓋不能正確顯示。（記為LVHA）

以下選擇器分別是什么意思?

div:first-child和div:first-of-type的作用和區別

":first-child"的作用是選擇“符合該選擇器并且其是父元素第一個子元素的元素” ,是結構上的第一個子元素。 這里指 div的父元素中第一個子元素必須是div

":first-of-type" 匹配的是某父元素下相同類型子元素中的第一個，比如 div:first-of-type，就是指所有類型為div的子元素中的第一個。這里不再限制是第一個子元素了，只要是該類型元素的第一個就行了。

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

Paste_Image.png