如何在每个带有css的WordPress帖子中瞄准第一个img

时间：2016-04-28 作者：Usce

我试图在每篇文章中都以第一张图片为目标。我尝试执行此操作的示例帖子是here.所以我试着用first-of-type 像这样

.single-post .entry-content img.aligncenter:first-of-type {

width: 80% !important;
float: left;


}
并试图替换first-of-type 具有first-child 我得到了相同的结果，即每个图像都被选中，而不是第一个。我认为这应该只选择出现.aligncenter 班

1 个回复
最合适的回答,由SO网友:bravokeyl 整理而成

首先，我想说这与这里的主题无关，因为它纯粹与css/js有关，但让我试着给出一些提示。

您的标记如下：

<article>
    <header></header>
    <div>
    ....
    <p><img class="align-center" src="path/to/img1"></p>
    ....
    <p><img class="align-center" src="path/to/img2"></p>
    ....
    </div>
</article>
first-of-type 表示选择选择器父级的第一个子级。

在上面的标记中，目标选择器是image with class align-center 选择器父项为p. 因此，选择选择器父对象的第一个子对象将匹配这两个图像。这就是为什么这两幅图像都被设计成样式。

first-child 表示选择一个元素（如果该元素是具有类align center的图像）and 并且是父选择器的第一个子级。因此，它匹配两幅图像。

我建议在这里使用JavaScript选择器。

document.querySelector(".single-post .entry-content img.aligncenter")
返回结果中的第一个元素。

如果使用jQuery，请使用:first 滤器

References:

first-of-type

first-child

SO

标签： css   小码农  

相关推荐

将页面特定的css文件入队的正确方法

我正在寻找一种替代使用函数的方法。php并基于每个页面的ID应用条件，相反，我希望将CSS排在每个页面的顶部，如下所示：<?php defined(\'ABSPATH\') or die(); ?> <?php get_header();?> <?php wp_enqueue_style(\'home\', get_template_directory_uri() . \'/assets/css/style.css\', \'\',