?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
E~F { sRules }
需要注意的是,選擇的只是同級的元素F,后代中的元素F不會被選擇。
<style> h3 ~ p { color: #f00; } </style> <h3>這是一個標題</h3> <p>p1</p> <div> <p>p2</p> <p>p3</p> </div>
這個例子中,只有 p1 會被選中;p2/p3 由于與 h3 并不是同級,所以不會被選中;
只選擇E元素之后的元素F,出現(xiàn)在E元素之前的元素F,不會被選擇到。
<style>
h3 ~ p { color: #f00; }
</style>
<p>p0</p>
<h3>這是一個標題</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>
這個例子中,p1/p2/p3 都會被選中;而 p0 因為在 h3 之前,所以不會被選中;
與 相鄰選擇符(E+F) 不同的是,兄弟選擇符會命中所有符合條件的兄弟元素,而不強制是緊鄰的元素。
E~F VS. E+F:
<style> /* 相鄰選擇符(E+F) */ h3 + p { color: #f00; } /* 兄弟選擇符(E~F) */ h3 ~ p { color: #f00; } </style> <h3>這是一個標題</h3> <p>p1</p> <p>p2</p> <p>p3</p>
這個例子中,如果是相鄰選擇符,那么只有 p1 會變成紅色;如果是兄弟選擇符,那么 p1/p2/p3 都會變成紅色;
<!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>這是一個標題</h3> <p>這是一個文字段落</p> <p>這是一個文字段落</p> <h3>這是一個標題</h3> <p>這是一個文字段落</p> <h3>這是一個標題</h3> <p>這是一個文字段落</p> <p>這是一個文字段落</p> </div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例