css - CSS 可以根据之前的标题类给我段落样式吗？

Question

所以我想为面试成绩单设置一些CSS规则。我想到的格式如下所示：

<h2 class="interviewer">Alice: [00:00:00]</h2>
<p>Is it ok if I ask you a question now?</p>

<h2 class="interviewee">Bob: [00:00:03]</h2>
<p>Sure go ahead.</p>

我希望段落是基于前面标题类的特定颜色。有没有办法做到这一点，因为它会使 html 标记变得更加简单。

Answer 1

您可以使用以下兄弟组合器：+

h2.interviewer + p { /* style goes here */ }

Answer 2

当然：

h2.interviewer + p {
    color: red;
}

我不完全确定如何处理多个段落。也许如果您将整组段落包含在 a 中div：

<h2 class="interviewer">Alice: [00:00:00]</h2>
<div>
    <p>Is it ok if I ask you a question now?</p>
    <p>More text here.</p>
</div>

<h2 class="interviewee"> class="interviewee">Bob: [00:00:03]</h2>
<div>
    <p>Sure go ahead.</p>
</div>

然后你可以这样做：

h2.interviewer + div {
    color: red;
}

Answer 3

顺便说一句，有更好的 HTML 元素来显示对话，比如新引入的<dialog>标签

http://www.quackit.com/html_5/tags/html_dialog_tag.cfm

更新：

该<dialog>元素从未进入 HTML5。它不存在。