Помогите начинающим... про селекторы для p и h1

xpg934 · April 3, 2009

Почему не работает такое:

<html>
<head>
<style type="text/css">
	p h1 { color: Red; }	
</style>
</head>

<body>
	<p>Test string. <h1>Hello, World</h1></p>
</body>

</html>

По идее, если следовать описанию селекторов - всё что в h1 должно стать красным, но, этого не происходит.

В чем причина? h1 перебивает стили сам, или селектор не находит?

Если убрать h1, а вместо него например span, и селектор сделать p span, то всё ok.

Поясните, что не так?

Таже проблема если например написано:

p.test span { color: Red; }

и код:

<p class="test"> abc 
 efd <span>Hello!</span>

Ведь по идее селектор выбирает любой span внутри p с классом test, но, ещё один вложеный <p> всё сбивает.

Что не так?

Justnewone · April 3, 2009

Почему не работает такое:
<html>
<head>
<style type="text/css">
	p h1 { color: Red; }	
</style>
</head>

<body>
	<p>Test string. <h1>Hello, World</h1></p>
</body>

</html>
По идее, если следовать описанию селекторов - всё что в h1 должно стать красным, но, этого не происходит.
В чем причина? h1 перебивает стили сам, или селектор не находит?
Если убрать h1, а вместо него например span, и селектор сделать p span, то всё ok.
Поясните, что не так?
Таже проблема если например написано:
p.test span { color: Red; }
и код:
<p class="test"> abc 
 efd <span>Hello!</span>
Ведь по идее селектор выбирает любой span внутри p с классом test, но, ещё один вложеный <p> всё сбивает.
Что не так?

1. Раздел для начинающих не тут.

2. В P нельзя вставлять H1...6 и наоборот.

3. В P нельзя вставлять другой P и наоборот :huh: .

Исправьте, и посмотрите что получится.

да, кстати такого нету - Red, есть red

Edited April 3, 2009 by Justnewone

SelenIT · April 3, 2009

Потому что HTML - не XML. И браузеры рендерят не код, а DOM. В которой в P физически не может быть вложен другой P или любой другой блочный элемент, поэтому открывающий тег любого из них автоматически закрывает предыдущий абзац.

Рекомендую при отладке смотреть именно на DOM (с помощью Firebug, Dragonfly, IE8 Developer Tools и т.п.).

Sign In

Помогите начинающим... про селекторы для p и h1

Question

xpg934

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information