一个多级向上 Css 选择器

Question

我正在尝试找到一种方法来使用 css 选择器来格式化特定的父 div。比如下面的示例代码...

<div id="one">
   <div id="two"
      <div id="three">
         <a href="foo.html">something</a>

...等

我想格式化 div#one，但前提是 #one 内的链接是特定页面，例如“foo.html”。

我已经尝试了几件事，但这里是我尝试使用的一个示例......

a[href *="foo"] #one:parent {
    background-color: #FF0000;
}

有没有办法使用 css 选择器、js 或 jQuery 来做到这一点？我在下面包含了一个代码 sn-p 用于测试...

a[href *="foo"] #one:parent {
        background-color: #FF0000;
    }

    <div id="one">
       <div id="two"
          <div id="three">
             <a href="foo.html">something</a>
          </div>
       </div>
    </div>
    

我搜索答案的所有地方都只提供了如何使用父元素执行此操作的线索，这些父元素只是上面的一个父元素，而不是本示例中的多个 div。

Answer 1

使用 CSS 你不能，但使用 JS 你可以简单地考虑parentNode：

document.querySelector('a[href *="foo"]').parentNode.parentNode.parentNode.style.backgroundColor = "red";

#one {
 padding:50px;
}

<div id="one">
  <div id="two">
    <div id="three">
      <a href="foo.html">something</a>
    </div>
  </div>
</div>

如果你有 n 个父级并且你不知道数字，你可以创建一个循环来查找你的元素：

var a = document.querySelector('a[href *="foo"]');
while (a.parentNode.getAttribute('id') != "one") {
  a = a.parentNode;
}
a.parentNode.style.background = "red";

#one {
  padding: 50px;
}

<div id="one">
  <div id="two">
    <div id="three">
      <div>
        <a href="foo.html">something</a>
      </div>
    </div>
  </div>
</div>