CSS的+(加号)选择器的使用方法_F11 - 专业站长和开发者的学习网站

本篇文章给大家介绍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元素，并为其添加样式。