html - 根据最近的祖先选择元素

Question

我想写一个 CSS 代码，根据最近的祖先选择。例如在这个 HTML 中:

.ancestor1 .child {
  color: red;
}

.ancestor2 .child {
  color: blue;
}

<div class="ancestor1">
  <div class="ancestor2">
    <div>
      <p class="child">Hi</p>
    </div>
  </div>
</div>

<div class="ancestor2">
  <div class="ancestor1">
    <div>
      <p class="child">Hello</p>
    </div>
  </div>
</div>

我希望第二个 p 标签(Hello)变成红色，但它是蓝色的，因为 .ancestor2 .child 稍后在 CSS 文件中变成了

抱歉我的英语不好。

Answer 1

要做到这一点，最简单的方法是使用 jQuery。如果你使用 jQuery，你可以使用最接近的函数。让 div 离你最近。如果这不是最接近您 child 的 div 的正确 div，直到您获得想要的 div。看看:Closest

斯文