CSS 相鄰兄弟選擇器

2021-08-21 07:10:05 字數 858 閱讀 1934

相鄰兄弟選擇器(adjacent sibling selector)可選擇緊接在另一元素後的元素,且二者有相同父元素。

選擇相鄰兄弟

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

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

this is paragraph.

this is paragraph.

this is paragraph.

this is paragraph.

this is paragraph.

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

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

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

請看下面這個文件樹片段:

list item 1

list item 2

list item 3

在上面的片段中,div 元素中包含兩個列表:乙個無序列表,乙個有序列表,每個列表都包含三個列表項。這兩個列表是相鄰兄弟,列表項本身也是相鄰兄弟。不過,第乙個列表中的列表項與第二個列表中的列表項不是相鄰兄弟,因為這兩組列表項不屬於同一父元素(最多只能算堂兄弟)。

請記住,用乙個結合符只能選擇兩個相鄰兄弟中的第二個元素。請看下面的選擇器:

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

CSS 相鄰兄弟選擇器

相鄰兄弟選擇器 adjacent sibling selector 可選擇緊接在另一元素後的元素,且二者有相同父元素。如果需要選擇緊接在另乙個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器 adjacent sibling selector 例如,如果要增加緊接在 h1 元素後出現的段...

CSS相鄰兄弟選擇器

css相鄰兄弟選擇器 可選擇緊接在另一元素後面的元素,且二者有相同的父元素。例如 如果要增加緊接在h1元素後出現的段落的上邊距 h1 p與 選擇器非常容易混淆的是 選擇器 該選擇器的作用是查詢某乙個指定元素後面的所有兄弟節點。具體例子如下 html body div class box h1 標題 ...

CSS相鄰兄弟選擇器

css相鄰兄弟選擇器 可選擇緊接在另一元素後面的元素,且二者有相同的父元素。例如 如果要增加緊接在h1元素後出現的段落的上邊距 h1 p與 選擇器非常容易混淆的是 選擇器 該選擇器的作用是查詢某乙個指定元素後面的所有兄弟節點。具體例子如下 html body div class box h1 標題 ...