选择“孙". [英] Selecting "grandchild"

问题描述

我有一个具有挑战性的问题！

让我们看看三种可能的情况

场景1

<div class="entry-content">
   <p><a href="#"><img src="#"></a></p>
</div>

方案2

<div class="entry-content">
   <p>&nbsp;</p>
   <p><a href="#"><img src="#"></a></p>
</div>

场景3

<div class="entry-content">
   <p>&nbsp;</p>
   <p>text</p>
   <p><a href="#"><img src="#"></a></p>
</div>

<p>或其他项目的数量不确定.我该如何仅选择第一个img来执行"display:none;"?

我的猜测是我必须将.entry-content作为父对象，但是如果我执行img:first-child，它将<p>作为父对象，如果还有更多图片，则将不显示所有图片.这就是为什么应该像祖父一样的:D如果我们不得不使用其他语言而不是CSS，我当然是开放的.

解决方案

无法使用纯CSS做到这一点，但是在jQuery中这非常简单，反正您很可能已经在页面上加载了它:

jQuery(document).ready(function($){
    $('.entry-content img').first().hide();
});

演示: http://jsfiddle.net/pq7rwfv3/

I have a challenging question!

Let's see three possible scenarios

Scenario 1

<div class="entry-content">
   <p><a href="#"><img src="#"></a></p>
</div>

Scenario 2

<div class="entry-content">
   <p>&nbsp;</p>
   <p><a href="#"><img src="#"></a></p>
</div>

Scenario 3

<div class="entry-content">
   <p>&nbsp;</p>
   <p>text</p>
   <p><a href="#"><img src="#"></a></p>
</div>

The number of <p> or other items would be undefined. How could I select ONLY the first img to do a "display:none;"?

My guess is I have to take as parent the .entry-content, but if I do a img:first-child, it takes the <p> as parent and would be non-displaying all pictures if there are more. That's why should be something like the grandfather :D If we have to use other language instead of CSS, I am open minded of course.

解决方案

There's no way to do this with pure CSS, but it's pretty straightforward in jQuery, which you most likely already have loaded on the page anyway:

jQuery(document).ready(function($){
    $('.entry-content img').first().hide();
});

Demo: http://jsfiddle.net/pq7rwfv3/

这篇关于选择“孙".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！