jeśli mam tag nagłówka <h1 class="hc-reform">title</h1>CSS Kolejnym elementem
h1.hc-reform{
float:left;
font-size:30px;
color:#0e73bb;
font-weight:bold;
margin:10px 0px;
}
a potem mam paragraf <p>stuff here</p>
jak mogę powiedzieć za pomocą CSS, że każdy <p> tag, który następuje po h1.hc-reform używać: clear:both;
byłoby to:
h1.hc-reform > p{
clear:both;
}
z jakiegoś powodu, który nie działa.
ten nazywany jest selektor adjacent sibling i jest reprezentowany przez znak plus ...
h1.hc-reform + p {
clear:both;
}
Uwaga: to nie jest obsługiwane w IE6 lub starszych.
no > to selektor podrzędny.
jeden chcesz to +
więc spróbuj h1.hc-reform + p
wsparcie przeglądarka nie jest wielki
> jest child selector. Jeśli Twój HTML wygląda tak:
<h1 class="hc-reform">
title
<p>stuff here</p>
</h1>
... to twój bilet.
Ale jeśli HTML wygląda następująco:
<h1 class="hc-reform">
title
</h1>
<p>stuff here</p>
Następnie chcesz adjacent selector:
h1.hc-reform + p{
clear:both;
}
Mam nadzieję, że nie zagnieździł p wewnątrz h1. Również sąsiadujący wybiera tylko pierwsze p. –
Można użyć sibling selector~:
h1.hc-reform ~ p{
clear:both;
}
wybiera to wszystko p elementy, które pochodzą fter .hc-reform, a nie tylko pierwszy.
Błędy IE w pierwszym łączu są niejasnymi przypadkami na krawędziach, co prawdopodobnie powoduje, że tryb quirksmode je omija. –
Niezupełnie. h1.hc-reform > p oznacza "dowolny p dokładnie jeden poziom pod h1.hc-reform".
Co chcesz to h1.hc-reform + p. Oczywiście może to powodować problemy w starszych wersjach Internet Explorera; Jeśli chcesz, aby strona była kompatybilna ze starszymi IE, utkniesz z ręcznym dodaniem klasy do akapitów lub użyciem JavaScript (w jQuery na przykład możesz zrobić coś takiego jak $('h1.hc-reform').next('p').addClass('first-paragraph')).
Więcej informacji: http://www.w3.org/TR/CSS2/selector.html lub http://css-tricks.com/child-and-sibling-selectors/
To byłoby wybrać tylko 'p' że przychodzi tylko po' h1.hc-reform'.Z drugiej strony może to być jedyna opcja, w której 'clear: both' musi być zastosowany, aby działał, ponieważ po prostu usuwa zmienną' h1', więc nadal jest poprawną odpowiedzią. – BoltClock
+1 do szybszego działa! i dla linku do w3c –
(ponownie twój komentarz skasowany) tak, ale wybierze tylko * jeden * 'p'. – BoltClock