• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 兄弟选择器

    匹配“prev”元素之后的所有兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器。

    jQuery("prev ~ siblings")

    prev:任何有效的选择器

    siblings:一个选择器来过滤第一选择器以后的兄弟元素。

    (prev + next)和(prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素,后者扩展了该达到跟随其的所有同级元素。

    例子

    查找所有跟在 id 为#prev 的元素后面的所有 div。注意,跟在后面的 span 不会被选中,因为它不是 div 。同时"niece"也不会被选中,因为它是某个兄弟元素的子元素,而不是兄弟元素。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
     
      div,span {
        display:block;
        width:150px;
        height:80px;
        margin:5px;
        background:#bbffaa;
        float:left;
        font-size:14px;
      }
      div#small {
        width:60px;
        height:25px;
        font-size:12px;
        background:#fab;
      }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <div>div (doesn't match since before #prev)</div>
      <span id="prev">span#prev</span>
      <div>div sibling</div>
     
      <div>div sibling <div id="small">div niece</div></div>
      <span>span sibling (not div)</span>
      <div>div sibling</div>
    <script>$("#prev ~ div").css("border", "3px groove blue");</script>
     
    </body>
    </html>
    
    div(doesn't match since before #prev)
    span#prev
    div sibling
    div sibling
    div niece
    span sibling(not div)
    div sibling

    上篇:相邻选择器

    下篇:包含选择器