仅处理具有特定类别的第一张图像答案

【问题标题】：Manipulate only the first image with certain class仅处理具有特定类别的第一张图像
【发布时间】：2011-12-21 01:37:23
【问题描述】：

我有一个 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 解决方案将不胜感激。

感谢您的帮助。

编辑

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

【问题讨论】：

我们可以多看看你的 HTML 吗？如果img 实际上是第一个子元素并且您的所有元素都聚集在同一个父元素中，:first-child 会起作用，但我认为我们需要更多的上下文来处理。

标签： javascript html css css-selectors

【解决方案1】：

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

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

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

【讨论】：

:first-of-type 基于元素类型进行操作，仅此而已。有关详细信息，请参阅this answer。在您的情况下，它恰好起作用只是因为 img 元素是该类的唯一元素。
@BoltClock：非常正确，没有意识到这一点。 @LukeBerry 请不要接受这个答案，以便我删除它:)
好吧，我认为您不必删除它...也许就像我在评论中所做的那样解释它。如果 img 元素是将成为该类的唯一元素，我建议将选择器更改为 img.premium-icon:first-of-type ;)
@BoltClock：只是想知道，小提琴是如何工作的？没有.img 类，第一个跨度也是有边界的，所以.img 有一些影响。
@pimvdb：当您将不同的元素类型与同一类混合时，和/或当您将不同的类与同一类型混合时，就会出现问题。见this fiddle；注意当我使用选择器.a:first-of-type 时，第一个.b 元素不会突出显示为蓝色，但每种类型的第一个.a 元素会突出显示。

【解决方案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 {
    ...
}

【讨论】：

:first-child 是伪类，不是伪元素。
:first-of-type 似乎只适用于元素，而不适用于类：jsfiddle.net/EVrzg
基于 OP 评论“所以，它永远是第一个孩子，因为我只是想选择第一个高级图标”，我知道 :first-of-type 应该可以不上课姓名。但是您对您的评论是正确的，然后我用我使用的方法更新了我的答案。

【解决方案3】：

img:first-child { ... } 呢？

【讨论】：

忘了说页面上还有其他图片，你可以在有类的图片上使用 first-child 吗？
是 - img.premium-icon:first-child
只有当它确实是第一个孩子时。

【解决方案4】：

$('.premium-icon:first') 使用那个

【讨论】：

比 .premium-icon:first-child { }
我们已经确定:first-child 将无法使用标记。

【解决方案5】：

假设“高级图标”类是为相关图片保留的，这个 JS 可以帮助：

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

【讨论】：