CSS選擇器 （思辨前端公開課 基礎 5）

快過年了，如果你厭倦了過年的吃吃喝喝和渾渾噩噩，那這個假期來學點有用的吧，

思辨學院，過年不停更，陪你一起過個上進年。

在前面幾期公開課里，我們帶大家梳理了HTML部分比較核心的幾個知識點，這節開始我們來學習前端基礎里另外一個非常重要的組成部分——CSS。

CSS的全稱是Cascading Style Sheets，即層疊樣式表，CSS的作用是用來定義網頁的布局和樣式。

如果你原來沒有接觸過前端，你可以這樣理解：好比我們需要蓋一座房子，HTML就是我們房子的地基牆體和買回來的傢具，只有HTML的時候我們房子是一個簡單的毛坯房，而CSS就是房子的裝修。它可以規定每一個傢具擺放的位置，每一面牆的顏色，地板的材質，等等等等。

在對CSS有了一個簡單的認識以後，我們就開始今天的內容了：

我們來看一個簡單的CSS例子

可以看到CSS語法主要有兩部分構成，一部分是選擇器，另一部分是選擇器後花括弧里具體的一系列樣式。每一條樣式由屬性名和屬性的值組成，以分號結束。

1.CSS選擇器

選擇器的用處是告訴瀏覽器要把花括弧里的樣式應用到哪些HTML標籤上面。即我們用選擇器選中一些標籤，然後把花括弧里對應的樣式應用到選中的這些標籤上。

在上面的例子里，我們l把 ist-style:none 這條樣式應用到了 ul 標籤上，把 color:red 和 text-decoration:none 這兩個樣式應用到了 ul 標籤下面的 a 標籤上。

CSS選擇器的種類很多，結不同種類型的選擇器，我們可以很靈活的選中我們想要應用樣式的HTML元素，我們將常用的選擇器分為三大類，來逐一學習。

1.1基本選擇器

1.1.1元素選擇器

元素選擇器即標籤選擇器，元素選擇器通過HTML的標籤名來選擇HTML元素，上面例子中的ul、a就都是標籤選擇器。

1.1.2類選擇器

類選擇器通過HTML元素上的class屬性來選取HTML標籤，類選擇器是現在使用最為廣泛的選擇器之一。

類選擇器的語法是 一個半形點號 + HTML標籤上 class 屬性的值。下面的例子是 .read

1.1.3 ID選擇器

ID選擇器與類選擇器類似，它通過HTML元素上的 id 屬性來選取HTML標籤，ID選擇器也是使用比較廣泛的選擇器。

標籤選擇器的語法是 一個半形 # 號 + HTML標籤上 id 屬性的值。、

需要注意的是，在同一個HTML頁面里，標籤id屬性的值是不能重複的，class屬性的值可以重複。

1.1.4 通配符選擇器

通配符選擇器選擇所有的HTML元素。

通配符選擇器的語法是一個星號 *

需要注意的是由於通配符選擇器會選中所有HTML元素，所以會影響瀏覽器的渲染效率，而且很多情況下我們並不需要選中所有元素，所以在一般情況下要避免使用通配符選擇器。

1.1.5 後代選擇器

後代選擇器由一組選擇器構成，選擇器之間用空格連接。後代選擇器利用HTML的嵌套層次關係來篩選HTML元素。

後代選擇器的語法是 父選擇器 + 空格 + 子選擇器 + 空格 + 子子選擇器 + ……

上面的選擇器中，ul是父選擇器，a是子選擇器，最終選中的是ul元素包裹的所有a標籤。

父選擇器和子選擇器可以用任意合法的CSS選擇器，比如 ID 或 Class 選擇器。

1.1.6 群組選擇器

群組選擇器由一組選擇器構成，組中的每一項選擇器之間用半形的逗號鏈接，群組選擇器選中的是每一項選擇器選中元素的集合。

1.2偽類選擇器

偽類選擇器也是用途比較廣泛的一類選擇器，偽類選擇器的作用是用來選取HTML元素的某個時刻的狀態，或者選取出會動態變化的一些元素。

偽類的語法 元素名:偽類

1.2.1 狀態偽類

:active 元素激活 （滑鼠在元素上按下且沒有鬆開）

:hover 滑鼠覆蓋 （滑鼠在元素上面）

:focus 獲得焦點 （表單元素獲得焦點 或 按tab鍵使HTML元素獲得焦點）

:disabled 被禁用 （表單元素被禁用 | CSS3）

:enabled 可用 （表單元素可用 | CSS3）

1.2.2 動態偽元素

:first-child 父元素的第一個子元素

上面的例子里，被選中的 li 是父元素 ul 的第一個子元素。

1.2.3 其它

在CSS3規範里，新增了許多動態偽元素，大家感興趣可以通過下面的鏈接做更深入的了解

偽類

1.3 偽元素選擇器

偽元素選擇器我們會在講到CSS浮動的時候介紹，主要會講 ::after 和 ::before 。

1.4 屬性選擇器

屬性選擇器作為CSS3新增的一類選擇器，雖然使用範圍不如基本選擇器廣泛，但也是需要了解的一部分，這部分內容作為今天的課後作業，請大家課後去熟悉和練習。

2 CSS選擇器權重

選擇器的權重決定了在不同CSS里在對同一個HTML元素的同一個屬性做了重複定義的時候，瀏覽器到底會採用哪個樣式去渲染元素，即決定元素最終表現出來的樣式。

舉一個簡單的例子來理解權重的概念：當在同一個時間，一隻狗同時聽到了來自不同的兩個人的指令，一個人讓它向東，一個讓它向西，狗狗最終是向東還是向西取決於發出命令的人在它心裡的地位，也就是權重。

CSS選擇器權重作為CSS選擇器知識體系里一個特別重要的概念應該著重去研究和理解，選擇器權重的場景和規則較多，作為初學者，下面這些基本的規則是我們現在就要掌握的。

2.1 CSS權重規則：

1.權重相同，後面定義的樣式會覆蓋前面定義的樣式

2.權重不同，應用權重高的樣式忽略權重低的樣式

2.2 CSS權重計算方法

1.一個行內樣式 +1000

2.一個id選擇器 +100

3.一個屬性選擇器、class選擇器、狀態偽類 +10

4.一個元素選擇器，或者偽元素選擇器 +1

知道了上面的方法，我們來看幾個例子：

• li:first-child = li元素（1）+ :first-child偽元素（1） = 2

• ul a = ul元素(1) + a元素（1） = 2

• body .nav-home a = body元素（1）+ class選擇器（10） = 11

2.3 !important

!important會無視上面的權重計算方法，也可以理解成一個樣式後如果加了 ! important ，那這條樣式的權重就是無窮大。

使用了!important之後，權重的調試會變得十分麻煩，所以在定義樣式的時候，不要使用!important關鍵字。

下一節我們會講CSS盒模型相關的知識點，大家可以預習起來了。

==============================

思辨學院的 大前端課-基礎部分 的課程是一個系統性的前端基礎入門課，課程將從前端知識體系建設、學習方法論、知識難點要點等多個維度帶你走過前端入門的過程。你可以關注微信公眾號 思辨學院 在第一時間獲取最新的課程。

推薦閱讀：