题
因此,我想验证一些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标记显着简单。
解决方案
您可以使用以下兄弟姐妹组合器: +
h2.interviewer + p { /* style goes here */ }
其他提示
当然:
h2.interviewer + p {
color: red;
}
不过,我不确定如何使用多个段落进行操作。也许如果您将整个段落包裹在 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;
}
顺便说一句,有更好的HTML元素用于展示对话,例如新介绍 <dialog>
标签
http://www.quackit.com/html_5/tags/html_dialog_tag.cfm
更新:
这 <dialog>
元素从未进入HTML5。它不存在。
不隶属于 StackOverflow