CSS的+(加号)选择器怎么用

来源：欧宁财经

在CSS中“+”符号选择器用于选择紧跟在指定元素之后但不在特定元素内部的元素。下面本篇文章就来具体介绍一下，希望对大家有所帮助。

“+”符号选择器

在CSS中“+”符号选择器被称为相邻兄弟选择器，用于选取在同一父元素下的，紧跟指定元素之后的另一个元素。【视频教程推荐：CSS教程】

基本句式：

元素E + 元素F{
 //CSS属性
}

说明：所有主流浏览器都支持“+”符号选择器；但在IE8中运行，必须声明 <!DOCTYPE>。

简单代码示例

下面通过简单代码示例来看看具体如何使用的。

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8">
 <title>“+”符号选择器</title> 
 <style> 
 body { 
 text-align:center; 
 } 
 h1 { 
 color:red; 
 } 
 div{
 font-size:25px; 
 }
 h2+div { 
 font-size:20px; 
 font-weight:bold; 
 display:inline; 
 background-color: yellow; 
 color:green; 
 } 
 </style> 
 </head> 
 <body> 
 <h1>PHP</h1> 
 <div>HTML</div> 
 <h2>CSS</h2> 
 <div>Javascript</div> 
 <div>MySQL</div> 
 </body> 
</html>

效果图：

可以看出，h2+div{}是选择紧跟h2元素之后的第一个div元素，并为其添加样式。