# Next Siblings Selector ("prev ~ siblings")

所属分类：选择器 > 层级 英文文档：Next Siblings Selector ("prev ~ siblings")

## next siblings selector

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

- #### 添加的版本: 1.0jQuery( "prev ~ siblings" )

  prev: 任何有效的选择器

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

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

## 例子:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
    <!DOCTYPE html><html><head>  <style>   div,span {    display:block;    width:80px;    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://code.jquery.com/jquery-latest.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>

#### Demo: