第2章 選擇器 選擇相鄰兄弟元素P56

2021-08-30 00:11:31 字數 393 閱讀 5451

假設你希望對乙個標題後緊接著的段落應用樣式,或者向乙個段落後緊接著的列表指定特殊的外邊距。

要選擇緊接在另乙個元素後的元素,而且二者有相同的父元素,可以使用相鄰結合符,這表示為乙個加號(+)。

與子結合符一樣,相鄰兄弟結合符旁邊可以空白符。

示例:

list item 1

list item 1

list item 1

樹結構如下圖:

在這個片段中,div元素中包含兩個列表,乙個是有序列表,另乙個是無序列表,每個列表都包含三個列表項。這兩個列表是相鄰兄弟,列表項本身也是相鄰兄弟。不過第乙個列表(ol)中的列表項不是第二個列表(ul)中列表項的兄弟,因為這兩組列表項的父元素不同。

顯示效果如下圖:

兄弟選擇器和相鄰兄弟選擇器

1 兄弟選擇器 brother selector,bs bs是css3.0新增的乙個選擇器,語法格式 a b a b為html元素 標籤,表示a標籤匹配selector的a,b標籤匹配selector的b時,b標籤匹配樣式 hello word hello word hello word hello...

相鄰兄弟選擇器

相鄰兄弟選擇器 adjacent sibling selector 可選擇緊接在另一元素後的元素,且二者有相同父元素。相鄰兄弟選擇器使用了加號 即相鄰兄弟結合符 adjacent sibling combinator 注釋 與子結合符一樣,相鄰兄弟結合符旁邊可以有空白符。請看下面這個文件樹片段 cs...

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

後代選擇器 後代選擇器 descendant selector 又稱為包含選擇器。後台選擇器可以選擇作為某元素後代的元素。例子 如果只希望h1元素中的em元素應用樣式,可以這樣寫 em元素 強調文字 h1 em this is a important paragraph.注意 如果寫作ul em,這...