CSS 後代選擇器

2021-08-21 07:00:55 字數 1235 閱讀 5341

後代選擇器(descendant selector)又稱為包含選擇器。

後代選擇器可以選擇作為某元素後代的元素。

我們可以定義後代選擇器來建立一些規則,使這些規則在某些文件結構中起作用,而在另外一些結構中不起作用。

舉例來說,如果您希望只對 h1 元素中的 em 元素應用樣式,可以這樣寫:

h1 em
上面這個規則會把作為 h1 元素後代的 em 元素的文字變為 紅色。其他 em 文字(如段落或塊引用中的 em)則不會被這個規則選中:

this is a important paragraph.

this is a important paragraph.

當然,您也可以在 h1 中找到的每個 em 元素上放乙個 class 屬性,但是顯然,後代選擇器的效率更高。

在後代選擇器中,規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符(combinator)。每個空格結合符可以解釋為「... 在 ... 找到」、「... 作為 ... 的一部分」、「... 作為 ... 的後代」,但是要求必須從右向左讀選擇器。

因此,h1 em 選擇器可以解釋為 「作為 h1 元素後代的任何 em 元素」。如果要從左向右讀選擇器,可以換成以下說法:「包含 em 的所有 h1 會把以下樣式應用到該 em」。

後代選擇器的功能極其強大。有了它,可以使 html 中不可能實現的任務成為可能。

假設有乙個文件,其中有乙個邊欄,還有乙個主區。邊欄的背景為藍色,主區的背景為白色,這兩個區都包含鏈結列表。不能把所有鏈結都設定為藍色,因為這樣一來邊欄中的藍色鏈結都無法看到。

解決方法是使用後代選擇器。在這種情況下,可以為包含邊欄的 div 指定值為 sidebar 的 class 屬性,並把主區的 class 屬性值設定為 maincontent。然後編寫以下樣式:

div.sidebar 

div.maincontent

div.sidebar a:link

div.maincontent a:link

有關後代選擇器有乙個易被忽視的方面,即兩個元素之間的層次間隔可以是無限的。

例如,如果寫作 ul em,這個語法就會選擇從 ul 元素繼承的所有 em 元素,而不論 em 的巢狀層次多深。

因此,ul em 將會選擇以下標記中的所有 em 元素:

CSS 後代選擇器

後代選擇器 descendant selector 又稱為包含選擇器。後代選擇器可以選擇作為某元素後代的元素。我們可以定義後代選擇器來建立一些規則,使這些規則在某些文件結構中起作用,而在另外一些結構中不起作用。舉例來說,如果您希望只對 h1 元素中的 em 元素應用樣式,可以這樣寫 h1 em上面這...

CSS後代選擇器

css後代選擇器也可以叫做派生選擇器 派生選擇符或包含選擇符,因為該選擇符型別是作用於某個元素中的子元素的。就是把外層的標記寫在前面,內層的標記寫在後面,之間用空格分隔。當標記巢狀時,內層的標記就成為外層標記的後代。後代選擇器的格式類似於 p span bp span和b之間用空格分隔。是最外層的文...

CSS 後代選擇器

後代選擇器 當需要把某乙個部分的所有內容進行樣式改變,就要想到後代選擇器。後代選擇器描述的是祖先結構。空格即表示後代,div1 p就是.div1的後代的所有p,如下 段落段落 段落 段落 段落段落 空格可以多次出現,比如以下就是.div1裡面的後代.li2裡面的p 假設1 猜猜我是什麼顏色嘻嘻嘻 假...