css - 将第一张图像隐藏在图像不是直接子级的 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;
}

这不起作用，因为图像不是直接 sibling 。

Answer 1

为什么要尝试 ~ ？

是

.mydiv p img{ display:none; }

还不够吗？

[编辑] 对不起，没明白你的意思，

试试这个

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