當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

012_CSS相邻兄弟选择器

發布時間：2025/4/17 CSS 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 012_CSS相邻兄弟选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

2. 選擇相鄰兄弟

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

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

h1 + p {margin-top: 50px; }

3. 語法解釋

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

3.2. h1 + p這個選擇器讀作: "選擇緊接在h1元素后出現的段落, h1和p元素擁有共同的父元素"。

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

li + li {font-weight: bold; }

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

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

3.4. 例子

3.4.1.?代碼

<!DOCTYPE html> <html><head><title>CSS相鄰兄弟選擇器</title><meta charset="utf-8" /><style type="text/css">li + li {font-weight: bold;}</style></head><body><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol></body> </html>

3.4.2.?效果圖

總結

以上是生活随笔為你收集整理的012_CSS相邻兄弟选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。