©
This document uses PHP Chinese website manual Release
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,出现在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前端开发参考手册系列</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>
点击 "运行实例" 按钮查看在线实例