Question

我有一系列页面，都使用相同的模板。它包含带有图像和文本的内容块。

有时，图像位于内容块的最顶部，有时图像会出现在段落之间的内容块中。

我需要将内容块中的图像设为padding-top，但如果页面的内容块顶部有图像，我不希望图像上有padding-top

我知道听起来我可以img:first-child: padding-top:0（或者第一种类型），但如果我这样做的话。具有相同模板的每个页面中的第一个图像将受到影响，即使它位于段落之间的内容块内。

是否有css或jquery规则来执行类似“如果图像出现在某个div中的所有文本之前，然后应用此css”

我可以为顶部的每个图像添加一个类，但我想id是否有人知道是否有办法解决这个问题。

以下是模型。

说一页有这个：

<div class="container">
   <img src=""> <!-- this will not have padding top -->

   <p>text</p>

   <img src=""> <!-- this will have padding top -->

   <p>text</p>
</div>

第二页有这个：

<div class="container">
   <p>text</p>

   <img src=""> <!-- this will have padding top -->

   <p>text</p>
</div>

这是css

.container img {
    padding-top: 10px; /* this gives all images a padding top */
}

.container img:first-child {
    padding-top: 0; 
}

/* this makes all first images no padding top but i want it so 
   if an image comes before all text, no padding top while 
   keeping the padding for images within the paragraphs */

Answer 1

元素的类型无关紧要。根据{{3}}：

：first-child CSS伪类表示任何元素其父母的第一个子元素。

如果您的HTML标记如下所示：

<div class="container>
    <img src="">

    <p></p>

    <img src="">

    <p></p>

    <img src="">
</div>

您可以设置所有图像的样式，然后更改图像的样式，这也是容器的第一个子项：

.container > img {
    padding-top: 10px;
}

.container > img:first-child {
    padding-top: 0;
}

或者查找所有作为容器的直接子项但不是第一个子项的图像：

.container > img:not(:first-child) {
    padding-top: 10px;
}

Answer 2

首先，添加样式以为所有图像添加填充顶部：

<style>
    #container img {
        padding-top: 10px; /* this gives all images a padding top */
    }
</style>

然后删除第一张图片的填充顶部（如果存在）

if ("<img" == $('#container').text().substring(0, 4)) {
   $('#container img:first-child').css('padding-top', 0)
}

如何定位部分中所有文本之前的图像

2 个答案: