美文网首页程序员
CSS选择器一(+号和checked)

CSS选择器一(+号和checked)

作者: OnyWang | 来源:发表于2017-12-29 17:40 被阅读23次

    虽千万人而吾往矣...

    +号选择器

    该选择器是相邻兄弟选择器,什么是相邻兄弟选择器呢?
    即----两个元素同级别,有同一个父元素,相当于jquery的next。

    举例

    • css代码
    <style type="text/css">
    h1 + p {margin-top:50px;}
    </style>
    
    • html代码
    <body>
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    </body>
    
    • 运行效果


      image.png
    • 解释
      body下面的h1和五个p元素为兄弟元素,他们有同一个父元素body。
      h1+p的话仅仅是选择的其后的第一个p元素,对于其他的p元素无效。

    checked元素

    选择所有被选中的元素。仅仅适用于input的多选按钮和单选按钮。
    比较常用的方式如下:

    input:checked
    { 
    background-color: #ff0000;
    }
    

    此时,所有被选中的单选按钮和多选按钮都会改变背景色。

    特别注意

    该选择器仅仅适用于Opera,对于其他任何浏览器都不适用。

    相关文章

      网友评论

        本文标题:CSS选择器一(+号和checked)

        本文链接:https://www.haomeiwen.com/subject/bscwgxtx.html