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最接近你。如果这不是最接近你的孩子的div的正确的div调用，直到你得到想要的div。看看：Closest

斯文

Answer 2

非常含糊的问题。它是真的与你有关的CSS而不是JavaScript吗？

如果你与javascript有关，那么如果不相关，这很可能是一个重复的问题。

Answer 3

你可以试试这个：如果我理解你的问题，也许你可以试试这个

.ancestor1 p.child{
  color: red;
}

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

或者最好使用jquery / javascript

$(document).ready(function(){
  $('.ancestor1').find('.child').css('color', 'blue');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ancestor1">
    <div class="ancestor2">
        <div>
            <p class="child">Hi</p>
        </div>
    </div>
</div>

选择基于最近祖先的元素

3 个答案: