普通規則 -- 選擇器
在 css 中，首先要選擇一個（或多個）文檔中的元素，然后才能對其應用我們定義的樣式；而選擇文檔中元素的規則，就是選擇器。
分類偽類偽元素選擇器列表基本選擇器
基本選擇器是指選中某類元素只需要一個選擇器的一類選擇器。
通配選擇器
通配選擇器就是一個星號( * )，用于匹配 html 文檔內的所有元素。在搭配其他選擇器使用時，會被完全忽略掉。
ID選擇器
ID 選擇器會根據元素的 ID 屬性中的內容匹配元素，元素 ID 屬性值必須與選擇器中的 ID 屬性名完全匹配，此條樣式聲明才會生效。
語法如下：
#id { 聲明 }類選擇器
類選擇器會根據元素的 class 屬性中的內容匹配元素，元素 class 屬性值列表中的至少一條必須與選擇器中的 class 屬性名完全匹配，此條樣式聲明才會生效。
語法如下：
.類名 { 聲明 }元素選擇器
通常說的元素選擇器一般是指普通的元素選擇器，它會根據元素的節點名稱（即標簽名）匹配元素；
語法如下：
節點名稱 { 聲明 }屬性選擇器
屬性選擇器會根據元素的屬性名或與聲明條件匹配的屬性值匹配元素。
語法如下：
簡單選擇器[屬性條件] { 聲明 }組合選擇器
組合選擇器是指連接多個選擇器，選中特殊的元素的選擇器
后代選擇器
后代選擇器是用一個空格連接兩個元素（這里的元素指匹配到的元素），表示匹配把第一個元素作為祖先元素的所有的第二個元素
語法如下：
元素1 元素2 { 聲明 }
/* 匹配 div 下的 所有 p */
div p {
...
}子選擇器
子選擇器是用一個 > 連接兩個元素（同上），表示匹配作為第一個元素的直接后代（子元素）的第二元素。它與后代選擇器相比，不同點在于：子選擇器只會匹配到下一級的元素，而后代選擇器是匹配到所有的后代元素，不管dom的層級有多深
語法如下：
元素1>元素2 { 聲明 }兄弟選擇器
兄弟選擇器是指匹配在同一個父元素下的同級元素的選擇器。分為一般兄弟選擇器和相鄰兄弟選擇器
一般兄弟選擇器
一般兄弟選擇器是用一個~連接兩個元素，表示匹配在第一個元素之后的所有的同一層級的第二個元素。注意：只會匹配第一個元素之后的元素。
語法如下：
元素1~元素2 { 聲明 }相鄰兄弟選擇器
相鄰兄弟選擇器是用一個+連接兩個元素，表示匹配在第一個元素緊隨之后的所有的同一層級的第二個元素。
語法如下：
元素1+元素2 { 聲明 }偽類選擇器
偽類選擇器是指添加到選擇器的關鍵字，指定要選擇的元素的特殊狀態。
語法如下：
元素:偽類 { 聲明 }常見的偽類選擇器如下：
其他偽類見 MDN
偽元素選擇器
偽元素表示所有未被包含在HTML的實體，即選中在html代碼中沒有出現過的元素。
偽元素選擇器用于匹配元素的特定部分（偽元素），一般有兩部分構成：基礎選擇器或簡單選擇器和偽元素。
元素::偽元素 { 聲明 }常用的偽元素如下：
其他偽元素見 MDN
選擇器列表
當同一套樣式規則需要應用在不同的元素上時，如果每個元素列表都寫一套相同的 css 樣式，則會產生大量的冗余代碼。此時便可以用 , 來分割多個選擇器css后帶選擇器，形成一個選擇器的列表，用于選中多個元素列表，并應用同套樣式
/* 對所有的 div 和 span 應用同一套樣式 */
div,span{
...
}上面的內容講的都是單個選擇器或兩個選擇器的介紹和應用。而在日常開發中，通常需要使用多個選擇器對某個元素或某類元素進行“精確打擊”，這就需要把選擇器組合起來使用了。
選擇器組合
簡單選擇器可以進行直接連寫（直接不需要任何符號連接）組成復合選擇器，表示“且”的關系；如：.a.b 表示具有 class a 且具有 class b 的元素。復合選擇器可以通過特殊字符（如：空格、>、~等）連接起來組成復雜選擇器。而復雜選擇器又可以通過 , 分割，連接成選擇器列表，表示“或”的關系。
在 css 中，正是這些簡單選擇器及其組合成的復合選擇器、復雜選擇器，進而形成選擇器列表，才能使我們能夠對我們的頁面進行樣式定制，應對各種復雜的需求。在這一系列龐大的定義中，同一個或者同一批元素被多條規則選中也是十分常見的。那么，瀏覽器又是如何確定要應用哪一條規則的呢？這就需要選擇器的優先級機制來解決這個問題了。
選擇器優先級
選擇器可用于選中文檔中的某個元素，然后給這個元素自定義樣式。文檔中的同一個元素，可以被不同的選擇器選中；那么，瀏覽器又是根據什么規則匹配應用樣式的呢？這個規則，實際上就是選擇器的優先級。
優先級是分配給 css 聲明的一個權重，瀏覽器應用哪個已定義的樣式由這個權重決定。當同一元素被相同權重優先級的選擇器選中時，會應用后聲明的選擇器。一般來說，選擇器的優先級如下：
內聯>ID選擇器>類選擇器>標簽選擇器
這個規則應該是 css 開發者的常識了，但是有沒有具體的、數據化的算法來說明選擇器的優先級呢？答案是有的。
選擇器的優先級由4個部分（a, b, c, d）組成：
如果有內聯樣式，a = 1 ，否則 a = 0b 為ID選擇器出現的次數c 為類選擇器、屬性選擇器和偽類出現的總次數d 為標簽選擇器和偽元素出現的總次數
比較規則為：
從左到右進行比較，數值較大的優先；如果相等，則向右比較下一位，數值較大的優先；如果4位數全部相等，則后聲明的優先。
舉個例子：
<div id="id" class="class1">
<div class="class2">
<span class="class3">元素span>
div>
div>假設我們要選擇上面的span元素，那么可能有以下這幾種方式（優先級從低到高）：
span --> (0, 0, 0, 1)
.class3 --> (0, 0, 1, 0)
.class2 .class3 --> (0, 0, 2, 0)
.class1 .class3 --> (0, 0, 2, 0)
#id .class3 --> (0, 1, 1, 0)
#id .class2 span --> (0, 1, 1, 1)
#id .class2 .class3 --> (0, 1, 2, 0)
...
元素這個規則適用于絕大多數的場景。且每一級看起來都是“不可逾越”的；那么，有沒有特殊的情況呢？答案還是有的：!。
還有一種方法是用數量取勝，這個與瀏覽器的存儲方式有關的，比如在ie6時期，class 名使用的是8個字節的字符串存儲的，8個字節存儲的最大值就是255，所以，當你使用256個 class 去選中一個元素的時候，此時的“次元壁”將會被打破，class 選擇器的權重將會超過 id 選擇器。不過現代的瀏覽器存儲擴大了許多，雖然會有這個一個溢出的問題css后帶選擇器，但在實際開發中基本不會用到幾萬個選擇器去選中某個元素列表，所以這個問題可以直接忽略了。
! 規則
! 會覆蓋其他任何樣式聲明，即它會無視上面的優先級規則，也會覆蓋上述規則中優先級最高的內聯樣式。! 規則破壞了樣式表中的優先級規則，所以在實際的開發中應該盡量避免使用 ! 規則。在使用 ! 規則之前，應該思考是否能通過優化選擇器的聲明結構來達到目的。
如果想要覆蓋已聲明的 ! 規則，只需要在已聲明的規則之后，再加一條 ! 規則即可。類似于符合“后來居上”，這里假設所有樣式表在文檔的頂部，所以，越后聲明的 css 樣式優先級就越高，而內聯的 ! 可以看做優先級是最高的，但同時也符合后聲明的樣式會覆蓋前面聲明的樣式這個規則。在這也強烈建議不要在內聯樣式中加 ! 規則，以免帶來不必要的麻煩。
div {
color: red ！important;
}
div {
color: blue ！important;
}上面最后生效的 css 規則是 color: blue。
最后附上一張通俗易懂的圖片
參考文章：