隐藏图像不是直接子项的div内的第一个图像

Question

我们试图隐藏除了每个mydiv的第一个图像之外的所有图像 而不隐藏任何给定以下html的文本:

<div class="mydiv">
    <p>
        <img  src="http://placekitten.com/220/200" />
    </p>
    <p>text
        <img  src="http://placekitten.com/250/200" />
    </p>
    <p>
        <img src="http://placekitten.com/200/250" />
    </p>
    <h2>Text</h2>
</div>
<div class="mydiv">
    <p>
         text
    </p>
    <p>text
        <img src="http://placekitten.com/250/200" />
    </p>
    <p>
        <img  src="http://placekitten.com/200/250" />
    </p>
</div>

这是一个关于JSFiddle的例子 .

我们希望避免更改原始的html(因为它是从wiswig编辑器生成的).
我们无法隐藏任何文本,因此隐藏整个段落是不可能的.

我基本上希望这个功能起作用

div.mydiv p img ~ div.mydiv p img {
   display: none;
}

这不起作用,因为图像不是直接兄弟姐妹.

Answer 1

你为什么要尝试~？

是

.mydiv p img{ display:none; }

还不够吗？

[编辑]抱歉，没明白你想要什么，

尝试这个

.mydiv p img{ display:none; }
.mydiv p:first-child img{ display:block; }