選擇器 ：

 選擇器（selector）會告訴瀏覽器：網頁 上的哪些元素需要設定什麼樣的樣式。比如：p這個選擇器就表示選擇頁面中的所 有的p元素，在選擇器之後所設定的樣式會 應用到所有的p元素上。

 元素選擇器

（標籤選擇器），可以根據標 籤的名字來從頁面中選取指定的元素。

 語法： 標籤名 { }

比如p則會選中頁面中的所有p標籤，h1會 選中頁面中的所有h1標籤。

類選擇器

類選擇器，可以根據元素的class屬性值選 取元素。

語法：.className { }

 比如.hello會選中頁面所有class屬性為 hello的元素。 

ID選擇器 

ID選擇器，可以根據元素的id屬性值選取 元素。 

語法： #id { }

比如#box會選中頁面中id屬性值為box的 元素，和class屬性不同，id屬性是不能重 復的。

複合選擇器

複合選擇器，可以同時使用多個選擇器， 這樣可以選擇同時滿足多個選擇器的元素。

語法：  選擇器1選擇器2{} 

例如 div.box1會選中頁面中具有box1這個 class的div元素。（不能留空隙）

(可以理解為交集)

群組選擇器

群組選擇器，可以同時使用多個選擇器， 多個選擇器將被同時應用指定的樣式。

語法：選擇器1,選擇器2,選擇器3 { }

比如p,.hello,#box會同時選中頁面中p元素，class為hello的元素，id為box的元素。

（可以理解為並集）

通用選擇器

通用選擇器，可以同時選中頁面中的所有元素。 

語法： *{ }

標籤之間的關係 

祖先元素

直接或間接包含後代元素的元素。

後代元素

直接或間接被祖先元素包含的元素。

後代選擇器 ：

後代選擇器可以根據標籤的關係，為處在 元素內部的代元素設定樣式。

語法：祖先元素 後代元素 後代元素 { }

 比如p strong 會選中頁面中所有的p元素 內的strong元素。 （有空隙）

父元素 

直接包含子元素的元素。 

子元素 

直接被父元素包含的元素。 

子元素選擇器 ：

子元素選擇器可以給另一個元素的子元素 設定樣式。

語法：父元素 > 子元素{}

比如body > h1{}將選擇body子標籤中的所 有h1標籤。

其他子元素選擇器

:first-child – 選擇第一個子標籤 

:last-child – 選擇最後一個子標籤

:nth-child – 選擇指定位置的子元素

:first-of-type

:last-of-type

:nth-of-type – 選擇指定型別的子元素

兄弟元素

擁有相同父元素的元素。

兄弟選擇器 ：

除了根據祖先父子關係，還可以根據兄弟 關係查詢元素。

語法: – 查詢後邊一個兄弟元素 ：兄弟元素 + 兄弟元素{}

         – 查詢後邊所有的兄弟元素 ：兄弟元素 ~ 兄弟元素{}

偽類和偽元素

有時候，需要選擇本身沒有標籤，但是 仍然易於識別的網頁部位，比如段落首行或滑鼠滑過的連線。CSS為他們提供一些選擇器：偽類和偽元素。

給連結定義樣式 ：

有四個偽類可以讓你根據訪問者與該連結的交 互方式，將連結設定成4種不同的狀態。

正常連結 – a:link

訪問過的連結 – a:visited（只能定義字型顏色）

滑鼠滑過的連結 – a:hover

正在點選的連結 – a:active

否定偽類 ：

否定偽類可以幫助我們選擇不是其他東西 的某件東西。

語法: :not(選擇器){}

比如p:not(.hello)表示選擇所有的p元素但 是class為hello的除外。

其他 ：

獲取焦點 – :focus

指定元素前 – :before

指定元素後 – :after

選中的元素 – ::selection

繼承

就像父親的財產會遺傳給兒子一樣，在CSS中祖先元素的樣式 同樣也會被子元素繼承。繼承是指應用在一個標籤上的那些CSS樣式會同時被應用到其內嵌標籤上。 比如為父元素設定了字型顏色，子元素也會應用上相同的顏色。繼承來的樣式沒有優先順序。但是並不是所有的樣式都會繼承，比如：背景相關的，邊框相關的，定位相關的。具體要看參考文件。

權重的計算

當樣式發生衝突時，需要將相關的選擇器優先順序進行求和計算，優先順序高的優先顯示，如果優先順序一樣，則顯示靠後的樣式

不同的選擇器有不同的權重值：

 – 內聯樣式：權重是1000

– id選擇器：權重是100

– 類、屬性、偽類選擇器：權重是10

– 元素選擇器：權重是1

– 萬用字元：權重是0

 計算權重需要將一個樣式的全部選擇器相加，比如 body h1的權重是20，h1的權重是10。優先順序計算時，總大小不能超過他的最大的數量級。

（可以在樣式後邊新增一個!important，如果樣式中添加了該內容，則該樣式將會獲取最大的優先順序，將會優先於所有的樣式顯示，包括內聯樣式，但是這個屬性要慎用。）