CSS相鄰兄弟選擇器

2022-08-17 16:21:16 字數 853 閱讀 6296

css相鄰兄弟選擇器：可選擇緊接在另一元素後面的元素，且二者有相同的父元素。

例如：如果要增加緊接在h1元素後出現的段落的上邊距：

h1 + p
與 「+」 選擇器非常容易混淆的是 「~」選擇器： 該選擇器的作用是查詢某乙個指定元素後面的所有兄弟節點。

具體例子如下：

html：


<


body


>


<


div 


class


="box"


>


<


h1>標題


h1>


<


p class


="p1"


>段落一的文字


p>


<


p class


="p2"


>段落二的文字


p>


<


p class


="p3"


>段落三的文字


p>


<


p class


="p4"


>段落四的文字


p>


div>


body


>
當css**如下時：

.box h1 + p
得到的頁面樣式：

當css的**為：

.box h1 ~ p
得到的頁面樣式為：

CSS 相鄰兄弟選擇器

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

CSS 相鄰兄弟選擇器

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

CSS相鄰兄弟選擇器

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