Специфичность селекторов

zodcyi · February 13, 2012

Есть следующий код html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

	<head>
		<title>Специфичность селекторов</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="style35.css" type="text/css" />
	</head>

	<body>
		<div class="one">
			<p title="privet">Это просто первый абзац текста</p>
		</div>
	</body>

</html>

и следующий код css

p[title="privet"] {
	background: #ff0000;
}

.one p {
	background: #00ff00;
}

В результате обработки кода браузером, получаем абзац на зеленом фоне.

Считаем специфичность для

p[title="privet"] {
	background: #ff0000;
}

Получается, один селектор тега

(это один) и селектор атрибута

[title="privet"]

(это десять). В сумме получается 11.

Теперь считаем специфичность для

.one p {
	background: #00ff00;
}

Получается, класс

.one

(это десять) и селектор тега

(это один). В сумме ,опять же, получается 11.

Так как специфичность селекторов одинакова, срабатывает тот селектор, что написан в коде ниже, т.е.


.one p {
	background: #00ff00;
}

Поэтому абзац в браузере отображается на зеленом фоне, а не на красном. Здесь все ясно.

Вопрос вот в чем. В случае изменения тега

<div>

на тег

, абзац в браузере отобразится на красном фоне. То есть, если изменить код следующим образом:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

	<head>
		<title>Специфичность селекторов</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="style35.css" type="text/css" />
	</head>

	<body>
		<p class="one">
			<p title="privet">Это просто первый абзац текста</p>
		</p>
	</body>

</html>

а код css оставить тот же, то в браузере абзац отобразится на красном фоне.

Помогите ,пожалуйста, разобраться, в чем дело.

.

klierik · February 13, 2012

а где стили для последнего примера?

sigma77 · February 13, 2012

zodcyi,

Посмотри в фаербаге, что у тебя происходит фактически.

В абзац не может содержать абзацы, ни другие блочные элементы - только текст.

У тебя же браузер генерирует следующую разметку


<p class="one"></p>
<p title="privet">Это просто первый абзац текста</p>
<p></p>

zodcyi · February 13, 2012

sigma77, спасибо большое за помощь!

Sign In

Специфичность селекторов

Question

zodcyi

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

zodcyi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information