当我尝试 select 前一个 ul 元素之后的第一个 ul 元素时，同级 select or 和 first-of-type 不起作用
Sibling selectors and first-of-type don't work when I try to select the first ul element after a prior one
对于上下文：我正在查看此 webpage，并且我正在尝试找出将什么放入开发控制台以按星级对每个无序列表进行排序。这是我要重新订购的实际 html 的片段：
<h3 id="invocations-level-1">Level 1</h3>
<p>some intro</p>
<ul>
<!-- <li><a href="" class="rating-"></a><sup><a href="/dnd5/abbreviations/"></a></sup>: </li> -->
<li><a href="https://www.dndbeyond.com/sources/phb/classes#AgonizingBlast" class="rating-blue">Agonizing Blast</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: Nearly every Warlock takes this. The damage is simply too good to pass up. The damage grows
multiplicatively as you get additional rays, so the total additional damage will range from +3 at low levels to a maximum +20 at 17th level.</li>
<li><a href="https://www.dndbeyond.com/sources/phb/classes#ArmorofShadows" class="rating-orange">Armor of Shadows</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: You already get light armor, and Mage Armor is only +1 AC over studded leather. You don't
get enough invocations to justify wasting one on this. Hexblades might consider this to close the AC gap between light/medium and heavy armor, but I'm not convinced that this is better than multiclassing to get heavy armor proficiency.</li>
<li><a href="https://www.dndbeyond.com/sources/phb/classes#BeastSpeech" class="rating-red">Beast Speech</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: Very situational.</li>
</ul>
<h3 id="invocations-level-3">Level 3 (Requires Pact Boon)</h3>
<p>some intro</p>
<span id="some-ad"></span>
<span class="some-other-ad">...</span>
<ul><li>...</li></ul>
每个列表中的每个级别（1、3、5、7、9、12、15）目前都按调用名称的字母顺序排序（例如 Agonizing Blast、Armor of Shadows），但我希望根据 类（形式为 rating-{blue,green,orange,red}.
重新排序
我的 MVCE 代码仅适用于第一批 ul 元素：
[1, 3, 5, 7, 9, 12, 15].forEach((level, index) => $$('div#main-content > ul')[index].innerHTML = [].map.call(['blue', 'green', 'orange', 'red'].flatMap(colour => $$('#invocations-level-'+level+' + p + ul li a.rating-' + colour)), function(el) {
return el.parentElement.outerHTML;
}));
（这是使用原生document.querySelectorAll，不涉及jQuery atm）
这仅适用于第一个 ul 元素，因为这部分 $$('#invocations-level-1 + p + ul li a.rating-blue') 在直接兄弟选择方面过于具体。在第二部分中，在 <h3 id="invocations-level-3">Level 3 (Requires Pact Boon)</h3> 之后有一个段落，但也有一些跨度。在后面的部分（上面未列出）中，没有跨度或段落元素。
我已经尝试了几次兄弟选择器组合的迭代，例如 $$('#invocations-level-3 ~ ul:first-of-type')（这在 -level-3 上不起作用，尽管在 -level-1 上工作），还有 $$('#invocations-level-3 ~ ul:not(ul~ul)') 再次在 -level-1 工作，但随后 none。
我可以像这样使用索引访问 $$('#invocations-level-3 ~ ul')[0] 但是我无法继续向下钻取选择器的 ' ... li a.rating-'+colour' 部分。
我可以做到这一点而不必涉及 jQuery，而且只需要一个选择器吗？
您可以完全使用 CSS 来做到这一点。但是 class 必须直接应用于 <li> 标签。然后在 <ul> 上使用 flexbox 并将 order-属性应用到 class.
ul {
display: flex;
flex-direction: column;
}
.rating-red {
order: 1;
}
.rating-orange {
order: 2;
}
.rating-blue {
order: 3;
}
<ul>
<!-- <li><a href="" class="rating-"></a><sup><a href="/dnd5/abbreviations/"></a></sup>: </li> -->
<li class="rating-blue"><a href="https://www.dndbeyond.com/sources/phb/classes#AgonizingBlast">Agonizing Blast</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: Nearly every Warlock takes this. The damage is simply too good to pass up. The damage grows
multiplicatively as you get additional rays, so the total additional damage will range from +3 at low levels to a maximum +20 at 17th level.</li>
<li class="rating-orange"><a href="https://www.dndbeyond.com/sources/phb/classes#ArmorofShadows">Armor of Shadows</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: You already get light armor, and Mage Armor is only +1 AC over studded leather. You don't
get enough invocations to justify wasting one on this. Hexblades might consider this to close the AC gap between light/medium and heavy armor, but I'm not convinced that this is better than multiclassing to get heavy armor proficiency.</li>
<li class="rating-red"><a href="https://www.dndbeyond.com/sources/phb/classes#BeastSpeech">Beast Speech</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: Very situational.</li>
</ul>
使用随每个 ul 扩展的 nth-of-type 有效
[1, 3, 5, 7, 9, 12, 15].forEach((level, index) => $$('div#main-content > ul')[index].innerHTML = [].map.call(['blue', 'green', 'orange', 'red'].flatMap(colour => $$('#invocations-level-'+level+' ~ ul:nth-of-type('+(index+1)+') li a.rating-' + colour)), function(el) {
return el.parentElement.outerHTML;
}));
看起来 ul:nth-of-type('+(index+1) 是必需的，因为它从来不是 #invocations-level-* 的兄弟姐妹类型中的第 n 个类型，而是在所选父代的子代中。当您记住 a CSS rule is read right-to-left 时，这是有道理的，因此 ~ 必须在 nth-of-type 之后计算。
对于上下文：我正在查看此 webpage，并且我正在尝试找出将什么放入开发控制台以按星级对每个无序列表进行排序。这是我要重新订购的实际 html 的片段：
<h3 id="invocations-level-1">Level 1</h3>
<p>some intro</p>
<ul>
<!-- <li><a href="" class="rating-"></a><sup><a href="/dnd5/abbreviations/"></a></sup>: </li> -->
<li><a href="https://www.dndbeyond.com/sources/phb/classes#AgonizingBlast" class="rating-blue">Agonizing Blast</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: Nearly every Warlock takes this. The damage is simply too good to pass up. The damage grows
multiplicatively as you get additional rays, so the total additional damage will range from +3 at low levels to a maximum +20 at 17th level.</li>
<li><a href="https://www.dndbeyond.com/sources/phb/classes#ArmorofShadows" class="rating-orange">Armor of Shadows</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: You already get light armor, and Mage Armor is only +1 AC over studded leather. You don't
get enough invocations to justify wasting one on this. Hexblades might consider this to close the AC gap between light/medium and heavy armor, but I'm not convinced that this is better than multiclassing to get heavy armor proficiency.</li>
<li><a href="https://www.dndbeyond.com/sources/phb/classes#BeastSpeech" class="rating-red">Beast Speech</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: Very situational.</li>
</ul>
<h3 id="invocations-level-3">Level 3 (Requires Pact Boon)</h3>
<p>some intro</p>
<span id="some-ad"></span>
<span class="some-other-ad">...</span>
<ul><li>...</li></ul>
每个列表中的每个级别（1、3、5、7、9、12、15）目前都按调用名称的字母顺序排序（例如 Agonizing Blast、Armor of Shadows），但我希望根据 类（形式为 rating-{blue,green,orange,red}.
我的 MVCE 代码仅适用于第一批 ul 元素：
[1, 3, 5, 7, 9, 12, 15].forEach((level, index) => $$('div#main-content > ul')[index].innerHTML = [].map.call(['blue', 'green', 'orange', 'red'].flatMap(colour => $$('#invocations-level-'+level+' + p + ul li a.rating-' + colour)), function(el) {
return el.parentElement.outerHTML;
}));
（这是使用原生document.querySelectorAll，不涉及jQuery atm）
这仅适用于第一个 ul 元素，因为这部分 $$('#invocations-level-1 + p + ul li a.rating-blue') 在直接兄弟选择方面过于具体。在第二部分中，在 <h3 id="invocations-level-3">Level 3 (Requires Pact Boon)</h3> 之后有一个段落，但也有一些跨度。在后面的部分（上面未列出）中，没有跨度或段落元素。
我已经尝试了几次兄弟选择器组合的迭代，例如 $$('#invocations-level-3 ~ ul:first-of-type')（这在 -level-3 上不起作用，尽管在 -level-1 上工作），还有 $$('#invocations-level-3 ~ ul:not(ul~ul)') 再次在 -level-1 工作，但随后 none。
我可以像这样使用索引访问 $$('#invocations-level-3 ~ ul')[0] 但是我无法继续向下钻取选择器的 ' ... li a.rating-'+colour' 部分。
我可以做到这一点而不必涉及 jQuery，而且只需要一个选择器吗？
您可以完全使用 CSS 来做到这一点。但是 class 必须直接应用于 <li> 标签。然后在 <ul> 上使用 flexbox 并将 order-属性应用到 class.
ul {
display: flex;
flex-direction: column;
}
.rating-red {
order: 1;
}
.rating-orange {
order: 2;
}
.rating-blue {
order: 3;
}
<ul>
<!-- <li><a href="" class="rating-"></a><sup><a href="/dnd5/abbreviations/"></a></sup>: </li> -->
<li class="rating-blue"><a href="https://www.dndbeyond.com/sources/phb/classes#AgonizingBlast">Agonizing Blast</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: Nearly every Warlock takes this. The damage is simply too good to pass up. The damage grows
multiplicatively as you get additional rays, so the total additional damage will range from +3 at low levels to a maximum +20 at 17th level.</li>
<li class="rating-orange"><a href="https://www.dndbeyond.com/sources/phb/classes#ArmorofShadows">Armor of Shadows</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: You already get light armor, and Mage Armor is only +1 AC over studded leather. You don't
get enough invocations to justify wasting one on this. Hexblades might consider this to close the AC gap between light/medium and heavy armor, but I'm not convinced that this is better than multiclassing to get heavy armor proficiency.</li>
<li class="rating-red"><a href="https://www.dndbeyond.com/sources/phb/classes#BeastSpeech">Beast Speech</a><sup><a href="/dnd5/abbreviations/">PHB</a></sup>: Very situational.</li>
</ul>
使用随每个 ul 扩展的 nth-of-type 有效
[1, 3, 5, 7, 9, 12, 15].forEach((level, index) => $$('div#main-content > ul')[index].innerHTML = [].map.call(['blue', 'green', 'orange', 'red'].flatMap(colour => $$('#invocations-level-'+level+' ~ ul:nth-of-type('+(index+1)+') li a.rating-' + colour)), function(el) {
return el.parentElement.outerHTML;
}));
看起来 ul:nth-of-type('+(index+1) 是必需的，因为它从来不是 #invocations-level-* 的兄弟姐妹类型中的第 n 个类型，而是在所选父代的子代中。当您记住 a CSS rule is read right-to-left 时，这是有道理的，因此 ~ 必须在 nth-of-type 之后计算。