• 技术文章 > css教程

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

    青灯夜游 青灯夜游 2019-02-12 17:09:59 原创 159
    在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>

    效果图:

    2.jpg

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

    以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!

    以上就是CSS的+(加号)选择器怎么用的详细内容,更多请关注php中文网其它相关文章!

    第五期线上培训班
    专题推荐: +选择器 CSS
    上一篇:background-repeat 怎么使用 下一篇:font-family属性怎么使用

    相关文章推荐

    • CSS教程之css选择器 、属性、值_基础教程 • 巧妙地使用CSS选择器_经验交流 • jquery CSS选择器笔记_jquery • CSS选择器总结 - zhongJaywang

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网