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？我在下面添加了一个代码片段用于测试...

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>

多级向上Css选择器

1 个答案: