後代選擇器
後代選擇器(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...