CSS後代選擇器

2021-07-15 03:24:49 字數 595 閱讀 1789

css後代選擇器也可以叫做派生選擇器、派生選擇符或包含選擇符,因為該選擇符型別是作用於某個元素中的子元素的。

就是把外層的標記寫在前面,內層的標記寫在後面,之間用空格分隔。當標記巢狀時,內層的標記就成為外層標記的後代。

後代選擇器的格式類似於:

p span b
p、span和b之間用空格分隔。

是最外層的文字,是中間層的文字,是最內層的文字,

最外層是標籤,裡面巢狀了標籤,標籤中又巢狀了標籤,那麼span是p的子元素,b是span的子元素。

源**如下:

巢狀是使用css標記的方法之一。

巢狀之外的標記不生效。

在瀏覽器中檢視css後代選擇器的顯示效果。如下圖所示:

將span選擇器巢狀在p選擇器中進行宣告,顯示效果只適用於和

之間的標籤,而它外面的標籤並不會產生任何效果。只有標籤中和之間的文字變成了藍色,而標籤外面和之間的文字顏色是按照css樣式規則的第2條規則進行設定的,即為紅色。

後代選擇器使得選擇器的應用變得複雜而靈活,熟練掌握後代選擇器,可以減少**的冗餘度,提高css的應用靈活性。

CSS 後代選擇器

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

CSS 後代選擇器

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

CSS 後代選擇器

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