Kann CSS-geben Sie mir Absatzformatierung basierend auf dem vorherigen überschrift Klasse?
-
19-09-2019 - |
Frage
Also ich möchte rig einige css-Regeln für interview-Transkripte.Das format, das ich im Auge habe sieht wie folgt aus:
<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>
Ich möchte den Absatz einer bestimmten Farbe auf der Grundlage der Klasse der obigen überschrift.Gibt es eine Möglichkeit, dies zu tun, als wäre es die html-markup wesentlich einfacher.
Lösung
Sie können folgende-sibling combinator:+
h2.interviewer + p { /* style goes here */ }
Andere Tipps
Sicher:
h2.interviewer + p {
color: red;
}
Ich bin mir nicht ganz sicher, wie es zu tun mit mehreren Absätzen, obwohl.Vielleicht, wenn Sie umhüllt den gesamten Satz von Absätzen in einem 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>
Dann könnten Sie dies tun:
h2.interviewer + div {
color: red;
}
Durch die Weg, es gibt bessere HTML-Elemente für die Anzeige ein Gespräch, wie die neu eingeführte <dialog>
Tags
http://www.quackit.com/html_5/tags/html_dialog_tag.cfm
UPDATE:
Die <dialog>
element es nie in HTML5.Es existiert nicht.