针对 CSS 中的单个图像

Question

使用以下 css/htms

    <p>&nbsp;</p>
<p><a href="#bottom"><img title="power gains" src="{{media url="wysiwyg/powergains.png"}}" alt="show power gains"></a></p>

<p><a title="Navistar" href="http://bluesparkautomotive.com/instructionfiles/073_ppb.pdf" target="_blank"><img src="{{media url="wysiwyg/installation.png"}}" alt="" /></a></p>

我需要使用以下内容定位底部图像：

img:hover{box-shadow: 6px 6px 20px rgba(0,0,0,.6); transform:scale(1.02);}
img:focus{box-shadow: 12px 12px 25px rgba(0,0,0,.7); width: 46%; transform: none;}

并保留所有其他图像而不进行格式化。

Answer 1

您可以使用p > a[title="Navistar"] > img 。 a[title="Navistar"]是一个属性选择器。

Answer 2

由于您需要选择特定的图像，因此您可以在img元素中添加一个id标签，以便可以专门选择它。 id标签是唯一的，不能共享，但是id名称可以自己选择。

<img src="" id="id123" />

在您的 CSS 中，使用#来指定您正在寻找一个 id：

#id123:hover {[css]}

这与您的问题并没有真正的关系，但它对将来的使用有好处。 如果您想选择一组元素以相同的方式设置样式，则可以使用class标记。 这可以通过以下方式完成：

<img src="" class="class123" />

class不是特定于一个元素，而是可以在一组需要相同样式的元素之间共享。 您可以使用 定位此类元素. 在您的 CSS 中：

.class123:hover {[css]}