Prawdopodobnie moja znajomość CSS jest ograniczona, ale nie uderstand to:Ustęp ignoruje styl z powodu kolejnego akapitu zagnieżdżonego
<p style="color: green">
<p style="color: red">This is red</p>
This should be green. But it's not.
</p>
Druga linia będzie świadczyć na czarno ignorując „color: green”. Czemu? Testowałem to w Chrome 28 i Firefox 22.
Nie można zagnieżdżać akapitów.
Akapit to element samozamykający, opcja </p> jest opcjonalna - każdy element bloku automatycznie zamknie ostatni otwarty <p>.
To, co się dzieje:
<p style="color: green">
</p> <!-- auto-closed paragraph -->
<p style="color: red">
This is red
</p>
This should be green. But it's not.
</p> <!-- here you have syntax error -->
Dzięki! Próbowałem zagnieździć div wewnątrz akapitu z tym samym efektem. Wygląda na to, że akapity zostały zamknięte nie tylko paragrafem, ale i blokami. Próbowałem również zagnieździć h1 w h1, a wynik był taki sam jak w paragrafach. –
Tak, też próbowałem i wygląda to tak - każdy element ** bloku ** zamyka akapit. Pozwól mi poprawić odpowiedź. – MightyPork
nie można zagnieżdżać <p> „s. Znacznik końcowy akapitu może zostać pominięty, jeśli zostanie zastosowany inny akapit. Oznacza to, że w kodzie pierwszy akapit nie zawiera tekstu, a drugi zawiera "To jest czerwone". Następnie jest napis: "To powinno być zielone, ale tak nie jest". który nie ma stylu ani zamykającego tagu </p>, który nie ma tagu otwierającego.
ustępu nie może być zagnieżdżona wewnątrz innego elementu akapitu lub bloku.
Gdy kod jest renderowany w przeglądarce jest wyświetlany jako jak poniżej
<p style="color: green"></p>
<p style="color: red">
This is red
</p>
This should be green. But it's not.
<p></p>
Tak więc widać, nie ma wrapper do ostatniego zdania w wyniku domyślny css kolor czyli czarny jest stosowany Na tym.
Należy również zauważyć, że możesz dostać się do źródła problemu, jeśli sprawdziłeś wynik w przeglądarce. Narzędzia inspekcyjne są teraz dostępne dla wszystkich głównych przeglądarek. – Cthulhu