我们试图隐藏除了每个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>
Run Code Online (Sandbox Code Playgroud)
这是一个关于JSFiddle的例子 .
我们希望避免更改原始的html(因为它是从wiswig编辑器生成的).
我们无法隐藏任何文本,因此隐藏整个段落是不可能的.
我基本上希望这个功能起作用
div.mydiv p img ~ div.mydiv p img {
display: none;
}
Run Code Online (Sandbox Code Playgroud)
这不起作用,因为图像不是直接兄弟姐妹.