?
This document uses PHP Chinese website manual Release
E+F { sRules }
與 兄弟選擇符(E~F) 相同的是,相鄰選擇符也是選擇同級(jí)的元素F;不同的是,相鄰選擇符只會(huì)命中符合條件的那個(gè)毗鄰的兄弟元素(即緊挨著E元素之后的第一個(gè)F元素)。
E~F VS. E+F:
這個(gè)例子中,如果是相鄰選擇符,那么只有 p1 會(huì)變成紅色;如果是兄弟選擇符,那么 p1/p2/p3 都會(huì)變成紅色;
<style> /* 相鄰選擇符(E+F) */ h3 + p { color: #f00; } /* 兄弟選擇符(E~F) */ h3 ~ p { color: #f00; } </style> <h3>這是一個(gè)標(biāo)題</h3> <p>p1</p> <p>p2</p> <p>p3</p>
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
7.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>相鄰選擇符 (E+F)_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> p + p { color: #f00; } </style> </head> <body> <div class="test"> <h3>這是一個(gè)標(biāo)題</h3> <p>這是一個(gè)文字段落</p> <p>這是一個(gè)文字段落</p> <h3>這是一個(gè)標(biāo)題</h3> <p>這是一個(gè)文字段落</p> <h3>這是一個(gè)標(biāo)題</h3> <p>這是一個(gè)文字段落</p> <p>這是一個(gè)文字段落</p> </div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例