CSS派生選擇器怎么理解

本文小編為大家詳細(xì)介紹“CSS派生選擇器怎么理解”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“CSS派生選擇器怎么理解”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

派生選擇器，乍一看名字不知所云，它又名上下文選擇器，它是使用文檔DOM結(jié)構(gòu)來進行css選擇的。DOM結(jié)構(gòu)在此不再贅述了，但為了更加清楚地說明問題，我們這里給出一個DOM樹作為參考：

(1)后代選擇器(descendant selector)

如上圖，如果想要選擇body元素的所有l(wèi)i子元素，方法如下：

body li { ...}

這里會選擇所有的li后代，也就是圖中的body下的所有l(wèi)i，不論他們之間相隔的代數(shù)有多少。同理，如果想要選擇h2元素下的span，可以使用以下代碼：

h2 span { ...}

如果我們要選擇擁有warning類的元素的li后代，可以使用下面的方法：.warning li { ...}

當(dāng)然，如果希望只選擇擁有warning類的div元素的li后代，可以寫作：div.warning li { ...}

由上面的例子不難看出，后代選擇器的規(guī)則就是用空格連接2個或多個選擇器?？崭竦暮x為：…的后代。多個選擇器的情況如下： ul li li { ...}

這樣，就會選擇所有ul下包含在li元素下的所有l(wèi)i元素了，聽起來十分拗口，參考我們的DOM樹，會選擇到文檔樹種最后一排li元素。

(2)子元素選擇器(child selector)

子元素選擇器和后代選擇器不同，它只能選擇某元素的直接后代，不能跨代選取，用法如下：ul > li { ...}

兩個子元素中間用一個大于號>連接。上面的代碼會選擇到所有ul元素的直接li子元素。對應(yīng)到DOM樹中，所有的li元素都會被選中，原因是圖中所有的li元素都是ul的子元素。

但是，以下代碼將不會選中任何元素：h2 > span { ...}

由于span是h2的”孫子元素”，h2沒有直接的span子元素，因而上面的代碼將不會選到任何結(jié)果。其他方面和后代元素類似，需要特別注意的就是子元素選擇器不能隔代選取。

(3)相鄰兄弟選擇器(Adjacent sibling selector)

相鄰兄弟選擇器，故名思意將會選取某個元素的相鄰兄弟元素，注意它選取的是相鄰的兄弟元素而不是所有的兄弟元素，實際上選取的是緊跟在后面的兄弟元素。

相鄰兄弟選擇器在實踐中有比較不錯的應(yīng)用，例如，你想在一個h3標(biāo)題后面的段落應(yīng)用某種獨到的樣式或者希望在某類p段落后的table上添加一個額外的邊距等等。它的用法如下：

li + li { ...}

以上代碼會選擇所有作為li相鄰元素的li元素，聽起來又有點拗口，參考DOM樹，它會選擇除了排在第一個li元素的其余4個li元素，因為2個排在第1的li元素沒有更靠前的兄弟元素來選擇它。

再比如：h2 + p { ...} 會選擇所有緊跟h2后面的p兄弟元素。h2.warning + p { ...} 會選擇所有有用warning類的h2元素后面緊跟的p兄弟元素。

(4)幾種派生選擇器的結(jié)合使用

實際上，以上介紹的幾種派生選擇器可以結(jié)合使用，看下面的例子：

html > body li.warning + li { ...}

上面的選擇器含義為：html元素的body子元素中，所有擁有warning類的li元素的相鄰兄弟元素。

讀到這里，這篇“CSS派生選擇器怎么理解”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。