通用兄弟选择器,位置无须紧邻,只须同层级,A~B 选择A元素之后所有同层级B元素。
设置同一父元素下的 p 元素之后的每一个 span 元素的字体颜色:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(cainiaoplus.com)</title> <style> p ~ span { color: red; } </style> </head> <body> <span>This is not red.</span> <p>Here is a paragraph.</p> <code>Here is some code.</code> <span>And here is a span.</span> </body> </html>测试看看 ‹/›
former_element ~ target_element { style properties }
element1~element2 选择器匹配出现在 element1 后面的 element2。
element1 和 element2 这两种元素必须具有相同的父元素,但 element2 不必紧跟在 element1 的后面。
IEFirefoxOperaChromeSafari
所有主流浏览器都支持 element1~element2 选择器。
注意:要想在 IE8 及其更早版本中使用这个选择器,必须声明 <!DOCTYPE>。