
相邻兄弟选择器 (+) 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。
在线示例
选择所有紧接着 <div> 元素之后的第一个 <p> 和第一个<span>元素:
<!DOCTYPE html>
<html>
<title>大卫编程网(div.cn)</title>
<head>
<style>
div+p
{
background-color:red;
color:white;
}
div+span {
background-color: DodgerBlue;
}
</style>
</head>
<body>
<h1>欢迎来到大卫编程网(www.div.cn)</h1>
<div>
<p>我们的网址是:www.div.cn.</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选择器参考手册