012_CSS相邻兄弟选择器
生活随笔
收集整理的這篇文章主要介紹了
012_CSS相邻兄弟选择器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. 相鄰兄弟選擇器(Adjacent sibling selector)可選擇緊接在另一元素后的元素, 且二者有相同父元素。
2. 選擇相鄰兄弟
2.1. 如果需要選擇緊接在另一個(gè)元素后的元素, 而且二者有相同的父元素, 可以使用相鄰兄弟選擇器(Adjacent sibling selector)。
2.2. 例如, 如果要增加緊接在h1元素后出現(xiàn)的段落的上邊距, 可以這樣寫:
h1 + p {margin-top: 50px; }3. 語法解釋
3.1. 相鄰兄弟選擇器使用了加號(hào)(+), 即相鄰兄弟結(jié)合符(Adjacent sibling combinator)。
3.2. h1 + p這個(gè)選擇器讀作: "選擇緊接在h1元素后出現(xiàn)的段落, h1和p元素?fù)碛泄餐母冈?#34;。
3.3. 請記住, 用一個(gè)結(jié)合符只能選擇兩個(gè)相鄰兄弟中的第二個(gè)元素。請看下面的選擇器:
li + li {font-weight: bold; }請看下面這個(gè)文檔樹片段:
<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>上面這個(gè)選擇器只會(huì)把列表中的第二個(gè)和第三個(gè)列表項(xiàng)變?yōu)榇煮w。第一個(gè)列表項(xiàng)不受影響。
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.?效果圖
總結(jié)
以上是生活随笔為你收集整理的012_CSS相邻兄弟选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 011_CSS子元素选择器
- 下一篇： 014_CSS伪类选择器