新手向 · CSS選擇器

碎碎念

新手剛接觸CSS的時候，進入CSS最核心的概念和難點前，最先接觸的就是CSS選擇器（CSS Selectors）。選擇器的作用是讓你定位到具體的 HTML 元素並且把樣式應用於它們之上。

選擇器的數量很多，但其實都是為了提高效率，滿足不同場景，因此不用去刻意記憶，需要理解和多敲代碼實踐。

這篇文章，我著重介紹主要的CSS選擇器和選擇器的優先順序原理。

分類

大體上，選擇器分為三類

1. 上下文選擇器（contextual selectors）

這裡的上下文指的是基於元素結構中的祖先，後代，同胞關係來選擇特定元素；

2. ID和類選擇器（ID&Class selectors）

基於你所指定的id和class屬性的值，來選擇特定元素；

3. 屬性選擇器（attribute selectors）

基於特定的屬性和屬性值選擇特定元素；

上下文選擇器：基於關係

後代選擇器：根據祖先作為上下文來選擇元素

選擇符：空格

article p {font-weight:bold;}n

如上代碼，只有article後代的P元素才會應用到後面的樣式，也就是說，上面這條規則的作用目標article上下文中的P元素。

更具體的上下文：

article h1 em {color:green;}n

雙上下文選擇符，以上表明，em要有兩層祖先；

注意：

1. 上下文選擇符用空格作為分隔符，分組選擇符用逗號作為分隔符！
2. article p {font-weight:bold};`中，article並不一定是p的父元素，無論你想選定的p元素和article元素之前隔著多少代/層，選擇器都會幫你選中p元素；

子選擇器：根據父元素選擇元素

選擇符：大於號>

.food>li {border:1px solid red;} n

如上代碼，會使class名為food下的孩子元素li加入紅色實線邊框，大於符號用於選擇指定標籤元素的第一代子元素，或者形象的說是孩子元素；

緊鄰同胞選擇器：根據緊鄰位置來選擇特定元素

選擇符：加號+

h2 + p {font-variant:small-caps;}n

這裡P元素必須是h2元素的緊鄰元素，且h2和p必須有相同的父元素。只有h2元素後的一個p元素會被選中；

一般同胞選擇符：同樣是根據為位置來選擇特定元素

選擇符：~

h2 ~ p{color:red;}n

p元素必須跟在h2元素後面，但不用緊鄰著，即所有h2後面的p元素都會被選中，下面我們來驗證一下：

以上代碼，驗證了

1. h2~p，h2後面的p元素不用緊鄰，中間就算插入了其它a元素，也不影響後面其它同胞P元素被選中；
2. h2前面的同胞p元素不會被選中；

通用選擇符

選擇符：*

以下，直接用代碼來解釋

* {color:green;}n/*所有元素都會應用這條規則*/nnp * {color:green;}n/*前面加p元素，這樣只會讓p包含的所有元素應用這條規則 */nnsection * a {color:green;}n/*任何是section的孫子元素，而非孩子元素的p標籤都會被選中*/n

注意：

第三種用法「非子選擇符」，意思是排除孩子元素這一層（孩子元素是什麼無所謂），只選中孫子元素為a的，下面我們來驗證下：

可見，粉色的字為非子選擇符選中的a元素，他的爺爺元素為p，中間是<span>還是<strong>，並沒有關係。

類和ID選擇器

ID選擇器

選擇符：#

ID選擇器使用方法：

/*樣式表中的寫法*/n#baidu_hospital {color: red;}nn/*HTML中的寫法*/n<p id="baidu_hospital">Good Hospital</p>n

類選擇器

選擇符：.

ID選擇器使用方法：

.baidu_hospital {color: lightblue;}nn<p class="baidu_hospital">cure my illness</p>n

多類選擇器

類選擇器的擴展用法

/*CSS部分*/n.baidu_hospital.baidu_ads {font-size: 2em;}nn/*HTML部分，p元素中有兩個類名*/n<p class="baidu_ads baidu_hospital">cure my illness</p>nn/*表示要選中頁面中同時存在這兩個類名的元素，這裡注意，css代碼中兩個類之間沒有空格，加了的話就變成n祖先/後代關係，HTML代碼中兩個類名則有空格，實際上可以用空格分隔更多的類！*/n

類名選擇器和ID選擇器的區別

類和ID選擇器相對來說比較好理解，但我們要注意他們之間的區別；

1. ID 選擇器是優先順序最高的選擇器類型（選擇器特殊形），唯一性的特點，特指個體。
2. 相對於 ID，class 的優先順序比較適中，特指「特定群體」。
3. ID和Class的區別對於 CSS 很簡單，你如果希望樣式僅用到一個元素下面，那你可以用 #id，如果想應用到一批類似元素下，就用 .class。

屬性選擇器

屬性名選擇符

以屬性名來選擇

img[title]{n color:red;n border:2px green solid;n}nn<h1>可以應用樣式：</h1>n<h2 title="Hello world">Hello world</h2>n<a title="W3School" href="http://w3school.com.cn">W3School</a>n<h1>無法應用樣式：</h1>n<a href="http://w3school.com.cn">W3School</a>nn/*包含屬性為title的圖片都會變成紅色，帶有綠色的框，至於title屬性值是什麼無所謂*/n

同時以【屬性】【屬性值】來選擇

img[title="hello-world"] {n border: 4px solid green;n}n/*在圖片的title屬性值為hello-world的情況下，給圖片增加一個綠色的邊框*/n

總結：基於屬性名和屬性等特徵選擇元素，使我們在面對相同標籤的時候能夠從另一個角度更準確的選擇元素。

到目前為止，以上的選擇符都有一個共同點，即它們都是針對標記/元素中的某個部分，比如標籤名、類名、ID、屬性或屬性值來作為選取的依據。

然而，使用CSS還可以在某些事件發生時，改變某些元素的樣式，比如用戶滑鼠懸停在某個按鈕上。這就要靠偽類來實現了...

偽類選擇器

形式：:link，冒號+屬性；語法：標籤名：偽類名 { ...}

舉例：

a:link {}n a:visited{}n a:hover{}n a:visited{}n input:focus {} 當游標聚焦在某個地方的時候n

偽元素選擇器

語法：

.help::after {n content: "[?]";n color: #000;n}n/*所有的help類後面的文本都會加上[?]*/n

複雜一些的例子：

div p::first-child {n n}n/*先找到div的所有兒子元素，再找到他的第一個兒子，同理last-childnnth-child()括弧裡面傳參數，第幾個兒子*/n

其它選擇器

• 以模糊的屬性值來選擇

選擇符：*=

p[title*="def"] {n color: red;n}n/*p標籤中所有title屬性的值中帶「def」的元素會被選中，n也就是給出一個迷糊的值，選中所有p標籤中帶title屬性，且title的值帶「def」的元素*/n

• 以模糊的屬性值來選擇

選擇符：~=

img[title~="Figure"] {n border: 1px solid gray;n}n/*n1.適用於由空格分隔的屬性值,其中的value必須是獨立的單詞.n2.這個規則會選擇 title 文本包含 "Figure" 的所有圖像。n沒有 title 屬性或者 title 屬性中不包含 "Figure" 的圖像都不會匹配。n*/n

~=和*=的區別在於，~=中的value值必須是單獨的單詞，*=中只要是屬性值的子串就行.

• ^= 選擇以xx為開頭的

p[title^="點擊"] {n color: gray;n border: 1px solid #000;n}n/*先尋找所有title屬性，然後尋找以「點擊」為開頭的屬性n同理，美元符號(結尾)*/n

匯總

[attribute] 用於選取帶有指定屬性的元素。 n[attribute=value] 用於選取帶有指定屬性和值的元素。 n[attribute~=value] 用於選取屬性值中包含指定辭彙的元素。 n[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。(適用於由連字元分隔的屬性值) n[attribute^=value] 匹配屬性值以指定值開頭的每個元素。 n[attribute$=value] 匹配屬性值以指定值結尾的每個元素。 n[attribute*=value] 匹配屬性值中包含指定值的每個元素n

推薦閱讀：