Question

在我的WordPress single.php中，我将图像，文本，标题和块引用混合在一起。我希望能够根据图像的位置为每个css应用特定的css。

问题是我无法控制块引用是跟随图像，h1还是常规p标记。例如，如果在图像之后首先有h1标签，我不想增加p标签的上边距，但是如果没有h1标签等我就会这样做。

HTML

<div id="single-pg" class="row">
    <?php the_content(); ?>
</div>

CSS

我尝试使用JavaScript来将文本包装在容器类中无济于事，所以我正在尝试一些基于

的内容。

#single-pg p { padding:0 20px; }
#single-pg p + img{ margin-top:30px }

Answer 1

一个选项可以尝试定位图像之后的所有p标记...就像exmaple ...

#single-pg p{padding:0 20px; margin-top:0;}

#single-pg img + p{ margin-top:30px; background:red;}


#single-pg img + h1{ background:blue;}

#single-pg img + blockquote{ background:orange;}

<div id="single-pg">
    <img src="http://via.placeholder.com/350x150">
    <h1>h1</h1>
    <p>paragraph</p>
</div>

<div id="single-pg">
    <img src="http://via.placeholder.com/350x150">
    <p>paragraph</p>
</div>

用于定位文本，标题，块引用，图像之后/之前的CSS

1 个答案: