在图像后将类应用于<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>标记的<?php if($_SERVER['REQUEST_SCHEME'] == 'http'){ header('location: https://www.example.com/confirm.php'); exit; } require('includes/session.class.php'); include 'includes/config.php'; $session = new session(); $session->start_session('_RTTLBRZ_', true); if(!isset($_SESSION['success'])){ header('location: ./'); } ?> 标记。

Answer 1

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

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

Answer 2

你可以尝试这个css选择器

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

Answer 3

完成

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

将关闭此问题。

Answer 4

试试这个：

img:first-of-type + p { /*/Css rules /*/}