CSS的相邻兄弟选择器什么时候用_WEB前端开发

    后端开发 后端开发 10个月前 (12-30) 45次浏览 已收录 0个评论 扫描二维码

    相邻兄弟挑选器(Adjacent sibling selector)可挑选紧接在另一元素后的元素,且两者有雷同父元素

    挑选相邻兄弟 ( 引荐进修:CSS教程 )

    假如须要挑选紧接在另一个元素后的元素,而且两者有雷同的父元素,能够运用相邻兄弟挑选器(Adjacent sibling selector)。

    比方,假如要增添紧接在 h1 元素后涌现的段落的上边距,能够如许写:

    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    h1 + p {margin-top:50px;}
    </style>
    </head>
    
    <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>
    </html>

    这个挑选器读作:“挑选紧接在 h1 元素后涌现的段落,h1 和 p 元素具有配合的父元素”。

    语法诠释:

    相邻兄弟挑选器运用了加号(+),即相邻兄弟连系符(Adjacent sibling combinator)。

    解释:与子连系符一样,相邻兄弟连系符旁边能够有空白符。

    请看下面这个文档树片断:

    <div>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ol>
    </div>

    在上面的片断中,div 元素中包括两个列表:一个无序列表,一个有序列表,每一个列表都包括三个列表项。这两个列表是相邻兄弟,列表项自身也是相邻兄弟。

    不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,由于这两组列表项不属于同一父元素(最多只能算堂兄弟)。

    请记着,用一个连系符只能挑选两个相邻兄弟中的第二个元素。请看下面的挑选器:

    li + li {font-weight:bold;}

    上面这个挑选器只会把列表中的第二个和第三个列表项变成粗体。第一个列表项不受影响。

    以上就是CSS的相邻兄弟挑选器什么时候用的细致内容,更多请关注ki4网别的相干文章!

    喜欢 (0)
    [1353713598@qq.com]
    分享 (0)
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址