基于最近的祖先选择元素

-1

我想写一个基于最近的祖先选择的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标签（你好）变成红色，但由于.ancestor2 .child在CSS文件后来成为它的蓝色。

对不起，我的英语不好。

来源

2017-09-21 M6stafa

我只想知道是不是不可能通过CSS或不： – M6stafa

你想申请什么？“在这个例子中我想申请'.ancestor2 .child'”？ – Jonjie

@Jonjie，类似'background-color'，我想知道如何使用CSS选择它。 – M6stafa

十分暧昧的问题。它是真正的CSS而不是JavaScript吗？

如果你是关于JavaScript，这是最有可能的，如果不相关，这是一个重复的问题。

来源

2017-09-22 01:39:20

是的，我只想使用CSS，在'jQuery'中有一个函数名''最近'这样做，但我想知道它是否可能在纯CSS中呢？ – M6stafa

好的。答案是不。在CSS3规范中，没有办法在CSS not事件中选择父元素。你必须诉诸JavaScript来实现这个目标。以下是CSS选择器的规格： - https://www.w3.org/TR/css3-selectors/#selectors - https://www.w3.org/TR/CSS2/selector.html#模式匹配 –

如果没有其他有趣的解决方案，我会接受。谢谢。 – M6stafa

要做到这一点，最简单的方法就是使用jQuery。如果你使用jQuery，你可以使用最接近的功能。让div最接近你。如果这不是最接近你的孩子最接近div的正确的div调用，直到你得到想要的div。看一看：Closest

斯文

来源

2017-09-22 01:33:38

感谢您提及它，但我想知道是否还有一个纯CSS解决方案。我的问题的JavaScript解决方案是你说的功能（最接近）。 – M6stafa

你可以试试这个：如果我明白你的问题，可能是你可以试试这个

.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>

来源

2017-09-22 01:55:50 Jonjie

基于最近的祖先选择元素

回答

相关问题