相邻兄弟选择器 (+) 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。
选择所有紧接着 <div> 元素之后的第一个 <p> 和第一个<span>元素:
<!DOCTYPE html> <html> <title>菜鸟教程(cainiaoplus.com)</title> <head> <style> div+p { background-color:red; color:white; } div+span { background-color: DodgerBlue; } </style> </head> <body> <h1>欢迎来到菜鸟教程(www.cainiaoplus.com)</h1> <div> <p>我们的网址是:www.cainiaoplus.com.</p> <p>我们的网站名称是:菜鸟教程.</p> <span>演示相邻兄弟选择器</span> <span>演示相邻兄弟选择器</span> </div> <p>我们为您提供各种菜鸟教程学,学好基础,你才能走的更远!</p> </body> </html>测试看看 ‹/›
former_element + target_element { style properties }
element+element 相邻兄弟选择器用于选择(不是内部)指定的第一个元素之后紧跟的元素。
IEFirefoxOperaChromeSafari
所有主流浏览器都支持 element+element 相邻兄弟选择器。
注意: element+element在IE8中运行,必须声明 <!DOCTYPE>完整CSS选择器参考手册