Question

我有一个PHP页面，它从数据库中引入结果并在页面上显示它们。某些图像在其名称左侧有一个红色“球”，表示他们有更多信息可供查看。

例如，一页上有30页，其中12页有红球。我需要能够操纵第一个球的位置并保持其他球的原样。

<img class="premium-icon" src="../../images/ball.png" alt="Premium Listing" />
<a href="page.php?cmd=auth&src=book&id=968365&a=CVTYJH5kavEbhwSDs" target="_blank" alt="" title="">
  <p><span style="">Result</span></p>
</a>

这就是它们的布局，每个图像都有相同的类，我无法阻止它。

我正在寻找一个纯CSS解决方案，但是Javascript会受到赞赏。

谢谢你的帮助。

修改

更多信息，所有这些都是从数据库引入的，所以我不知道在最终产品中第一张图片是否会有高级图标。这就是图像的情况，因为需要移动图像。所以，它永远是第一个孩子，因为我只想选择第一个高级图标。

Answer 1

您可以使用first-of-type伪类：http://jsfiddle.net/WAG6e/。

修改：正如BoltClock提到的那样，:first-of-type会忽略该类，因此实际上您需要构建HTML，以便第一个img是您想要的样式。然后，这是指定标签名称的问题：

img:first-of-type {
    border: 1px solid red;
}

Answer 2

您正在寻找的伪类是:first-child。 According to w3schools，它适用于所有主流浏览器，因为您声明了<!DOCTYPE>。

那么，问题的示例CSS：

img.premium-icon:first-child {
  margin-left: 10px;
}

请记住，如果您的img不是结果容器中的第一个子节点，那么所需的伪类将为:first-of-type，但它仅适用于IE9 +。

但是，正如@ptriek指出的那样，:first-of-type不能与类名一起使用。然后，您需要更改HTML。

就我个人而言，我一直在做的是所需元素上的类名.first，在我的服务器端代码上设置，所以我的CSS很简单，适用于所有浏览器：

img.premium-icon.first {
    ...
}

Answer 3

img:first-child { ... }怎么样？

Answer 4

$（ '溢价图标：第一'）用那个

Answer 5

假设为相关图片保留了类“premium-icon”，这个JS可以提供帮助：

var a=document.getElementsByClassName("premium-icon");
if (a) if (a.length>0) {manipulate_image(a[0]);}

仅处理具有特定类别的第一个图像

5 个答案: