如何连接组合器选择器

Question

假设我有这个 html：

    <a></a>
    <b> </b>
    <c> </c>
    <c>incorrect</c>
    <a></a>
    <c>incorrect</c>
    <b> </b>
    <d> </d>
    <b> </b>
    <a></a>
    <c>incorrect</c>
    <a></a>
    <c>correct</c>
    <a></a>
    <c>incorrect</c>
    <d> </d>

我如何选择介于<a> 和<d> 之间的<c>correct</c> 我想到了这样的事情：

document.querySelector('a~c.d~c');

但它不起作用。您有什么想法可以实现吗？

Answer 1

要选择<c>correct</c>，可以使用：

document.querySelector('b+c');

这会选择所有c 直接跟在b 之后。

如果要选择位于两个元素之间的所有元素，则不能使用 CSS。

虽然可以用一点 javascript：

// selects all 'c' following an 'a'
for (const element of document.querySelectoAll("a+b")) {
  // checks if the next element after 'c' is 'b'
  if (element.nextSibling().tagName == "b") {
    // prints every 'c' that follows an 'a' and has a 'b' after
    console.log(element);
  }
}

Answer 2

console.log(document.querySelector('a~c+b~c').innerText)

<a></a>
<c>incorrect</c>
<b></b>
<c>correct</c>
<b></b>
<a></a>

console.log(document.querySelector('d~c+a~c').innerText)

<a></a>
<b> </b>
<c> </c>
<c>incorrect</c>
<a></a>
<c>incorrect</c>
<b> </b>
<d> </d>
<b> </b>
<a></a>
<c>incorrect</c>
<a></a>
<c>correct</c>
<a></a>
<c>incorrect</c>
<d> </d>