012_CSS相邻兄弟选择器
生活随笔
收集整理的這篇文章主要介紹了
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; }請看下面這個文檔樹片段:
<div><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> </div>上面這個選擇器只會把列表中的第二個和第三個列表項變為粗體。第一個列表項不受影響。
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相邻兄弟选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 011_CSS子元素选择器
- 下一篇： 014_CSS伪类选择器