wenn ich ein Header-Tag <h1 class="hc-reform">title</h1>CSS nächste Element
h1.hc-reform{
float:left;
font-size:30px;
color:#0e73bb;
font-weight:bold;
margin:10px 0px;
}
und danach habe ich einen Absatz <p>stuff here</p>
, wie ich sagen kann, CSS, dass jeder <p> Tag, das die h1.hc-reform folgt zu verwenden: clear:both;
wäre das:
h1.hc-reform > p{
clear:both;
}
aus irgendeinem Grund funktioniert das nicht.
Dies wird den adjacent sibling Selektor genannt, und es wird durch ein Pluszeichen ...
h1.hc-reform + p {
clear:both;
}
Hinweis: Dies ist nicht in IE6 oder älter unterstützt wird.
nein > ist ein Kind-Selektor.
diejenige, die Sie wollen, ist +
versuchen so h1.hc-reform + p
Browser-Unterstützung
Die > ist ein child selector nicht groß ist. Also, wenn Ihr HTML so aussieht:
... dann ist das Ihr Ticket.
Aber wenn Ihr HTML wie folgt aussieht:
<h1 class="hc-reform">
title
</h1>
<p>stuff here</p>
Dann möchten Sie die adjacent selector:
h1.hc-reform + p{
clear:both;
}
Ich hoffe, er hat nicht ps in h1's verschachtelt .. Auch angrenzend wählt nur die erste p. –
Sie können die sibling selector~ verwenden:
h1.hc-reform ~ p{
clear:both;
}
Dies wählt alle Elemente, die kommen a nach .hc-reform, nicht nur die erste.
Die IE Bugs im ersten Link sind obskur Rand Fall Sachen, die wahrscheinlich ist warum Quirksmode sie übersieht. –
Nicht genau. Die h1.hc-reform > p bedeutet "jede genau eine Ebene unter h1.hc-reform".
Was Sie wollen, ist h1.hc-reform + p. Natürlich könnte dies in älteren Versionen von Internet Explorer zu Problemen führen. Wenn Sie die Seite mit älteren IEs kompatibel machen möchten, müssen Sie entweder den Absätzen manuell eine Klasse hinzufügen oder JavaScript verwenden (in jQuery können Sie z. B. so etwas wie $('h1.hc-reform').next('p').addClass('first-paragraph') machen).
Weitere Informationen: http://www.w3.org/TR/CSS2/selector.html oder http://css-tricks.com/child-and-sibling-selectors/
, dass nur die 'P' würde wählen, die gerade nach' h1.hc-reform' kommt.Dann wiederum könnte es die einzige sein, auf die das 'clear: both' angewendet werden muss, da es einfach den' h1' float löscht, also ist es immer noch eine gültige Antwort. – BoltClock
+1 auf die schnellere Waffe! und für den Link zu der w3c –
(re Ihrer gelöschten Kommentar) ja, aber es wird nur * one * 'p '. – BoltClock