優先（優先級為）： !important > 內聯樣式 > #id > .class > tag > * > 繼承 > 默認 。

當選擇器的權重相同時，它將應用於就近原則。

權重的計算方式：

-----------------------------------------------------

來源： MDN web docs

不同種類的CSS選擇器：

選擇器可以被分為以下類別：

- 簡單選擇器 （Simple selectors）：通過元素類型、class 或 id 匹配一個或多個元素。

- 屬性選擇器 （Attribute selectors) : 通過 屬性 / 屬性值 匹配一個或多個元素。

- 偽類 (Pseudo-classes) ：匹配處於確定狀態的一個或多個元素，比如被鼠標指針懸停的元素，或當前被選中或未選中的復選框，

或元素是DOM樹中一父節點的第一個子節點。

- 偽元素（Pseudo-elements) : 匹配處於相關的確定位置的一個或多個元素，例如每個段落的第一個字，或者某個元素之前生成的內容。

- 組合器（Combinators) ：這裏不僅僅是選擇器本身，還有以有效的方式組合兩個或更多的選擇器用於非常特定的選擇的方法。

例如，你可以只選擇divs的直系子節點的段落，或者直接跟在headings後面的段落。

- 多重選擇器（Multiple selectors) ：這些也不是單獨的選擇器； 這個思路是將以逗號分隔開的多個選擇器放在一個CSS規則下面，

以將一組聲明應用於由這些選擇器選擇的所有元素。

-----------------------------------------------------

屬性選擇器：

(1) 存在和值 (Presence and value)屬性選擇器

這些屬性選擇器嘗試匹配精確的屬性值：

- [attr] : 該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。

- [attr=val] : 該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。

- [attr~=val] : 該選擇器僅選擇具有 attr 屬性的元素， 而且要求 val 值 是 attr 值包含的被空格分隔的取值列表裏中的一個。

讓我們看一個特別的例子，下面是它的HTML代碼：

面試總結【css篇】- css選擇器以及優先級