li1

li2

• 
  

next l1

next l2

next l3

< / li>

li3

< / body>

此时实现为

• 标签所有的直接的子元素添加边框：

引入 jQuery：< /script></span></code></div><div data-lake-id="3506f748d1eda859ccf00f42fae51db1"><span class="lake-fontsize-1515">写入 js：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="29e0501271526c249967edbdfc4c8eeb"><code><span class="lake-fontsize-1515"><script></span></code></div><div data-lake-id="f8f8da7ab007100ea6b1431fe6affcbe"><code><span class="lake-fontsize-1515">$ (function( ) i</span></code></div><div data-lake-id="a83b602e33e56c43ca6dad5886563a51"><code><span class="lake-fontsize-1515">$ ( ".topnav>li" ).css ( "border" , "1px solid red" );)</span></code></div><div data-lake-id="0caed703c4cbdc2c4acee32c36459339"><code><span class="lake-fontsize-1515">< /script></span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="357ee4677bef5896d382ee5c56cabaeb"><span class="lake-fontsize-1515">注意：<ur>标签里的子元素不属于<ul class="topnav">标签所有的直接的子元素。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="0d09ca82006e1d8e0f9a35c8dd0e3f2f"><span class="lake-fontsize-1515">此时执行效果如下：</span></div><div data-lake-id="9a36616ec313f6097d6f63d71c47183d"><span class="lake-fontsize-1515"><strong><span>1、</span></strong></span><span class="lake-fontsize-1515"><strong><strong>descendant selector </strong></strong></span></div><div data-lake-id="417332a73f29ec77e4dfe368c1e2b77e"><span class="lake-fontsize-1515">(后代选择器)</span><span class="lake-fontsize-16"></span></div><div data-lake-id="fcf8a3cf035e22299375862f2c294faf"><span class="lake-fontsize-1515">描述∶选择给定的祖先元素的所有后代元素。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="f66300bd66f38ad68d784ac5050decb3"><span class="lake-fontsize-1515">语法:jQuery( "ancestor descendant" )</span><span class="lake-fontsize-14"></span></div><div data-lake-id="97b7360efce8e0e93bfc83a6b470210b"><span class="lake-fontsize-1515">注:</span><span class="lake-fontsize-14"></span></div><div data-lake-id="abb654b57a39a88c4c12ec6d6786a7f0"><span class="lake-fontsize-1515">ancestor:任何有效的选择器。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="0374038ebca552460ad4c7ab700a6aa9"><span class="lake-fontsize-1515">descendant:一个用来筛选后代元素的选择器。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="2d501e7d2586618cccd3f82398007cb8"><span class="lake-fontsize-1515">比如：</span><code><span class="lake-fontsize-1515">$ ( ".topnav>li" ).css ( "border" , "1px solid red" );)</span></code></div><div data-lake-id="ed924b97b039df9666f00fa16c1eb6bc"><span class="lake-fontsize-1515">这样写的话<ur>里的子元素就能被选择到：</span></div><div data-lake-id="2100f24dbbac688dee88af61fa1c1e4e"><code><span class="lake-fontsize-1515">$ ( ".topnav li").css ( "border" , "1px solid red" ) ;</span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="45709e345086d925b9bfa6dc3ee5a6a5"><span class="lake-fontsize-1515">此时执行结果如下：</span></div><div data-lake-id="8fa3b386dd580ef2f604c901432d3987"><span class="lake-fontsize-1515"><strong><span>1、</span></strong></span><span class="lake-fontsize-1515"><strong><strong>next adjacent selector </strong></strong></span></div><div data-lake-id="9a9540297c971065c64979f7ac411a65"><span class="lake-fontsize-1515">("prev + next")相邻选择器</span><span class="lake-fontsize-16"></span></div><div data-lake-id="f0465724b66d5bad1a4cfdc6edf36b74"><span class="lake-fontsize-1515">描述∶选择所有紧接在“prev”元素后的“next”元素</span><span class="lake-fontsize-14"></span></div><div data-lake-id="b19f74b0a8ba74c695510a4ec41524e5"><span class="lake-fontsize-1515">语法:jQuery( "prev + next" )</span><span class="lake-fontsize-14"></span></div><div data-lake-id="e5b882be5cb6ff416772f4a3e35d1de4"><span class="lake-fontsize-1515">注∶</span><span class="lake-fontsize-14"></span></div><div data-lake-id="539d1271d90ff95c5cf60a2fe6f44a2c"><span class="lake-fontsize-1515">prev.任何有效的选择器。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="24626ddbf3fdfbd7d93d59fa69735940"><span class="lake-fontsize-1515">next:用于筛选紧跟在"prev”后面的元素的选择器。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="0c61e7a09da7b7f6c5f0441d9ff464eb"><span class="lake-fontsize-1515">举例：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="f4477078321fbdfa0a731597b5d25c61"><span class="lake-fontsize-1515">选择所有紧跟在<li>标签后的<li>标签：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="60c9b004005cfd7ec5bc58d4af051424"><span class="lake-fontsize-1515">将</span><code><span class="lake-fontsize-1515"> $( ".topnav li").css ( "border" , "1px solid red" ); 修改为：</span></code></div><div data-lake-id="36e693d3fc8c5f5b21cdaaf294c753e4"><code><span class="lake-fontsize-1515">$ ( "li+li" ).css ( "border" , "1px solid red");</span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="34eee0e24ccc46c421586698b3469064"><span class="lake-fontsize-1515">此时执行结果为：</span></div><div data-lake-id="92b44c1354ef9f94e64498c546de1cdf"><span class="lake-fontsize-1515"><strong><span>1、</span></strong></span><span class="lake-fontsize-1515"><strong><strong>Next Siblings Selector </strong></strong></span></div><div data-lake-id="8d2e69e48f3d7ed3b8f3fe35bc772eb4"><span class="lake-fontsize-1515">("prev ~ siblings")</span><span class="lake-fontsize-16"></span></div><div data-lake-id="e74a8dd8121575e16a92a9408463324e"><span class="lake-fontsize-1515">描述∶匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="f2e8811aa424c5cb5709be02b3742450"><span class="lake-fontsize-1515">语法:jQuery( "prev ~ siblings" )</span><span class="lake-fontsize-14"></span></div><div data-lake-id="c7bc82b31db77d9aa44de42bc6a74d8e"><span class="lake-fontsize-1515">注︰</span><span class="lake-fontsize-14"></span></div><div data-lake-id="65300824b4c5ec8a4db7cd1a5804d8cd"><span class="lake-fontsize-1515">prev.任何有效的选择器</span><span class="lake-fontsize-14"></span></div><div data-lake-id="d43786660ce571c54333ee8e4502ca0a"><span class="lake-fontsize-1515">siblings:一个选择器来过滤第一选择器以后的兄弟元素。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="df5b0c6126dd5adc81167f08cc6ead69"><span class="lake-fontsize-1515">举例：写入 <span><div> 标签：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="6ec517455bf279b8b93806c6ed55a1d5"><code><span class="lake-fontsize-1515"><span id="prev">span1< / span></span></code></div><div data-lake-id="0d553474282add8e1f333462b31eef29"><code><span class="lake-fontsize-1515"><div>div1s/ div></span></code></div><div data-lake-id="e20fc091e59e216e3d52213f76cff5d5"><code><span class="lake-fontsize-1515"><div>div2</div></span></code></div><div data-lake-id="be72f2146c9ee838359cac7f47d2fbdd"><code><span class="lake-fontsize-1515"><div>div3</span></code></div><div data-lake-id="9bfd7048e35caafc58e501018848debc"><code><span class="lake-fontsize-1515"><div>div4< /div></span></code></div><div data-lake-id="6457dd62803548df8d57b8f58ca7b59b"><code><span class="lake-fontsize-1515">< / div></span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="0deb5f7c5bb81629cde698e2ff9a6bc7"><span class="lake-fontsize-1515">查找 id=“prev”后所有<div>标签，要求必须时兄弟关系的：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="3224a4bc1d0c54f9700450c01f3e7efb"><code><span class="lake-fontsize-1515"><script></span></code></div><div data-lake-id="5ddf4422ab51cbdeaea5c3ee206040ff"><code><span class="lake-fontsize-1515">$ ( function()i</span></code></div><div data-lake-id="d34f8a900519fdfa86f25ea8c5cdd50b"><code><span class="lake-fontsize-1515">$ ("#prev~div").css ( "border" , "1px solid red" );</span></code></div><div data-lake-id="31a5bf8529895c73cb1452059e8ce5b1"><code><span class="lake-fontsize-1515">})</span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="eed8270f63839e2c06f4dfed6ad4b7d3"><span class="lake-fontsize-1515">这里，div4 是不会被选择上的因为它的父级元素是 div3</span><span class="lake-fontsize-14"></span></div><div data-lake-id="e7db609056d934586037ec304e3b4fbc"><span class="lake-fontsize-1515">此时执行结果如下：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="82198afdf0d6e289c01123bf34b77aa6"><span class="lake-fontsize-1515"> </span><span class="lake-fontsize-1515">(prev + next) 和 (prev ~ siblings) 之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。</span><span class="lake-fontsize-14"></span></div>