html - 将类应用于图像后的 <p> 标签

Question

我有一个博客，其中有多个图像，后跟一行作为标题，方式如下:

<div class="content">
    <p>Some Text above has <em>style</em> and so I can't use `em` style.</p>
    <img class="alignnone" src="header.jpg">
    <p><em>Photo Courtesy Of Donald Trump</em></p>
    <p>Some Text</p><p>Some Text</p><p>Some Text</p>
</div>

我要改第一个<p>在图片后面添加标签并尝试了以下 CSS，但没有成功。

img:first-child > p {
    border-bottom: 1px solid #000;
}

也试过这个:

img > p:first-child em {
    border-bottom: 1px solid #eee;
}

试过这个但是改变了第一行或我以前使用过的任何其他地方 <em>所以这个方法也不管用，尽管我得到了我想要的。

.content p > em {
    border-bottom: 1px solid #eee;
}

如何检测 <img>标签后跟 <p><em>caption here</em></p> .

Answer 1

您在这里寻找的 CSS 选择器是 +，adjacent sibling combinator .例如:

img + p {
    border-bottom: 1px solid #000;
}