?
This document uses PHP Chinese website manual Release
E~F { sRules }
需要注意的是,選擇的只是同級(jí)的元素F,后代中的元素F不會(huì)被選擇。
<style> h3 ~ p { color: #f00; } </style> <h3>這是一個(gè)標(biāo)題</h3> <p>p1</p> <div> <p>p2</p> <p>p3</p> </div>
這個(gè)例子中,只有 p1 會(huì)被選中;p2/p3 由于與 h3 并不是同級(jí),所以不會(huì)被選中;
只選擇E元素之后的元素F,出現(xiàn)在E元素之前的元素F,不會(huì)被選擇到。
<style>
h3 ~ p { color: #f00; }
</style>
<p>p0</p>
<h3>這是一個(gè)標(biāo)題</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>
這個(gè)例子中,p1/p2/p3 都會(huì)被選中;而 p0 因?yàn)樵?h3 之前,所以不會(huì)被選中;
與 相鄰選擇符(E+F) 不同的是,兄弟選擇符會(huì)命中所有符合條件的兄弟元素,而不強(qiáng)制是緊鄰的元素。
E~F VS. E+F:
<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>
這個(gè)例子中,如果是相鄰選擇符,那么只有 p1 會(huì)變成紅色;如果是兄弟選擇符,那么 p1/p2/p3 都會(huì)變成紅色;
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>兄弟選擇符 (E~F)_CSS參考手冊_web前端開發(fā)參考手冊系列</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í)例" 按鈕查看在線實(shí)例