CSS派生選擇器怎么理解

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

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

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

如上圖，如果想要選擇body元素的所有li子元素，方法如下：

body li { ...}

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

h2 span { ...}

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

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

由上面的例子不難看出，后代選擇器的規則就是用空格連接2個或多個選擇器。空格的含義為：…的后代。多個選擇器的情況如下： ul li li { ...}

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

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

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

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

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

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

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

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

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

li + li { ...}

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

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

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

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

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

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

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