CSS後代選擇器 子元素選擇器 相鄰兄弟選擇器

2021-06-20 00:40:01 字數 1331 閱讀 5565

後代選擇器

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

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

例子:如果只希望h1元素中的em元素應用樣式,可以這樣寫:em元素:強調文字

h1 em

this is a important paragraph.

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

子元素選擇器

如果不是希望任意的後代元素,而是縮小範圍,只選擇某個元素的子元素,可以使用子元素選擇器。

例如,如果希望選擇只作為h1元素的子元素中strong元素,可以寫成:

h1 > strong

這個規則會把第乙個h1下面的倆個strong元素變成紅色,但是第二個h1中的strong不受影響。

結合後代選擇器和子選擇器

table.company td > p

上面的選擇器會選擇作為td元素子元素的所有p元素,這個td元素本身從table元素繼承,該table元素有乙個包含company

的class屬性。

相鄰兄弟選擇器

如果需要選擇緊接在另乙個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器。

例如,如果要增加緊接在h1元素後出現的段落的上邊距,可以這樣寫:

h1 + p

這個選擇器讀作:「選擇緊接在h1元素後出現的段落,h1和p元素擁有共同的父元素」

語法解釋

相鄰兄弟選擇器使用了加號(+),即相鄰兄弟結合符。

注意:只能改變相鄰兄弟中的第二個元素。

例子:

list item 1

list item 2

list item 3

li + li

注意:上面這個選擇器只會把列表中的第二個和第三個列表項變成粗體。第乙個列表項不受影響。

結合其他選擇器

相鄰兄弟結合符還可以結合其他結合符:

html > body table + ul
這個選擇器解釋為:選擇緊接在table元素後出現的所有兄弟ul元素,該table元素包含在乙個body元素中,

body元素本身是html元素的子元素。

後代選擇器和子元素選擇器

1.後代選擇器和子元素選擇器之間的區別?1.1 後代選擇器使用空格作為連線符號 子元素選擇器使用 作為連線符號 1.2 後代選擇器會選中指定標籤中,所有的特定後代標籤,也就是會選中兒子 孫子 只要是被放到指定標籤中的特定標籤都會被選中 子元素選擇器只會選中指定標籤中,所有的特定的直接標籤,也就是只會...

css後代選擇器,相鄰兄弟選擇器,子元素選擇器

後代選擇器 element element 例 div p 將會選中div元素中的p元素 相鄰兄弟選擇器 element element 例 div p 將會選中div元素塊結束後緊跟著的p 元素,即形為.的p元素會被選中 子元素選擇器 element element 例 div p 當div是p的...

後代選擇器和子選擇器

後代選擇器 h1 em 選擇器可以解釋為 作為 h1 元素後代的任何 em 元素 有關後代選擇器有乙個易被忽視的方面,即兩個元素之間的層次間隔可以是無限的。例如,如果寫作 ul em,這個語法就會選擇從 ul 元素繼承的所有 em 元素,而不論 em 的巢狀層次多深。div01 ul li div0...