Вложенность, селекторы (непонятное поведение)

capscom · January 2, 2011

Привет всем, с наступившим Новым Годом!

Есть такой код:

<body>
		<div id="content">
			<div>
				<div>	</div>
			</div>
		</div>
</body>

Стили для него:

#content{
			position:	relative;							
}
#content div{
			background:	red;
			height:		100px;
			border:		1px black dashed;
}
#content div div{

			position:			absolute;
			width:		300px;
			height:		50px;
			background:	gray;
			border:		1px black dashed;

}

Тут все понятно, но стоит применить id для третьего дива, т.е.:

<body>
		<div id="content">
			<div>
				<div id="qwerty"></div>
			</div>
		</div>
</body>

#content{
			position:	relative;							
}
#content div{
			background:	red;
			height:		100px;
			border:		1px black dashed;
}
#qwerty{

			position:			absolute;
			width:		300px;
			height:		50px;
			background:	gray;
			border:		1px black dashed;

}

Как вдруг у #qwerty высота становится фиксированной всегда и равной 100px (хотя прописано 50px). Почему??? Поясните, пожалуйста.

Edited January 2, 2011 by capscom

deadrash · January 2, 2011

Если я вас правильно понял, то дело в весе селекторов http://cssing.org.ua/2005/06/09/css-selectors-weight/

Edited January 2, 2011 by deadrash

Temiks · January 2, 2011

#qwerty{

			position:			absolute;
			width:		300px;
			height:		50px;
			background:	gray;
			border:		1px black dashed;

}
Как вдруг у #qwerty высота становится фиксированной всегда и равной 100px (хотя прописано 300px). Почему??? Поясните, пожалуйста.

так у вас ширина 300 а не высота

capscom · January 2, 2011

так у вас ширина 300 а не высота

Простите, ошибся.. Высота у #qwerty становится 100px, а не 50.

Если я вас правильно понял, то дело в весе селекторов http://cssing.org.ua/2005/06/09/css-selectors-weight/

Спасибо за ссылку, судя по ней у #qwerty самый высокий приоритет, но он почему-то игнорируется. (

deadrash · January 2, 2011

Простите, ошибся.. Высота у #qwerty становится 100px, а не 50.
Спасибо за ссылку, судя по ней у #qwerty самый высокий приоритет, но он почему-то игнорируется. (

Почему же самый высокий.

#content div = 101

#qwerty = 100

По этому и применяется стиль написаный в #content div который обозначает - любой элемент div идущий после элемента с идентификатором content.

Вы можете написать div#qwerty и тогда оба селектора будут одинакового веса, в таком случае применится тот что ниже по списку.

Edited January 2, 2011 by deadrash

capscom · January 2, 2011

Почему же самый высокий.
#content div = 101
#qwerty = 100
По этому и применяется стиль написаный в #content div который обозначает - любой элемент div идущий после элемента с идентификатором content.
Вы можете написать div#qwerty и тогда оба селектора будут одинакового веса, в таком случае применится тот что ниже по списку.

Спасибо большое, теперь с этим вопросом стало ясно.

Но возник вопрос по селекторам:

#content div - означает применить стиль диву, находящемуся в контейнере #content (т.е только дочернему) ??? Просто по логике работы получается, что стили назначаются всем дивам, находящимся внутри #content.

Edited January 2, 2011 by capscom

Temiks · January 2, 2011

так можно ж написать

#content

и отдельно

#div

#content div - означает применить стиль диву, находящемуся в контейнере #content (т.е только дочернему) ???

да

capscom · January 2, 2011

да

А по логике работы получается, что на все дивы вложенные применяются стили, а не только дочерний. Вот пример:

<body>
		<div id="content">
			<div>
				<div id="qwerty"></div>
			</div>
		</div>
</body>

#content{
			position:	relative;							
}
#content div{
			background:	red;
			height:		100px;
			border:		1px black dashed;
}
#qwerty{

			position:		absolute;
			width:		   300px;
			height:			50px;
			background:	gray;
			border:		   1px black dashed;

}

селектор #content div переопределяет высоту у #qwerty на значение 100px(хотя ведь только на дочерний элемент должно действовать правило). Пока вот этот момент недопонимаю.

Temiks · January 2, 2011

он будет и применятся к <div id="qwerty"></div>

та же фигня у меня сейчас со списками, думаю объяснят почему так и как от этого "уйти"

deadrash · January 2, 2011

да

Не пудрите человеку мозги!

Нет!

Будет применено всем дивам которые следуют после вашего #content т.е. например в коде

<div id="content" >
 <div></div>
 <ul>
  <li>
   <div></div>
   </li>
  </ul>
</div>

стиль #content div будет применён к диву перед списокм И к диву внутри списка ul. Короче говоря ко ВСЕМ дивам идущим внутри блока с айдишкой #content

Для того что бы применить только к дочернему элементу, нужно записать селектор вот так #content > div

Edited January 2, 2011 by deadrash

capscom · January 2, 2011

Не пудрите человеку мозги!
Нет!
Будет применено всем дивам которые следуют после вашего #content т.е. например в коде
<div id="content" >
 <ul>
  <li>
   <div></div>
   </li>
  </ul>
</div>
стиль #content div будет применён к диву внутри списка ul
Для того что бы применить именно к дочернему элементу списка нужно записать селектор вот так #content > div

Спасибо еще раз)) Выручили, теперь все ясно.!! Осел 6 не работает же с конструкцией вида ">". Это как как-то лечится или тока id всем элементам проставлять и явно им прописывать стили?

deadrash · January 2, 2011

Спасибо еще раз)) Выручили, теперь все ясно.!! Осел 6 не работает же с конструкцией вида ">". Это как как-то лечится или тока id всем элементам проставлять и явно им прописывать стили?

Точно не помню, он вроде работает с ним но как-то криво.

И всё таки старайтесь лучше используйте не id а class про этом в стиле вместо решётки пишите точку.

capscom · January 2, 2011

Точно не помню, он вроде работает с ним но как-то криво.
И всё таки старайтесь лучше используйте не id а class про этом в стиле вместо решётки пишите точку.

Спасибо !!!

icp · January 2, 2011

Не пудрите человеку мозги!
Нет!
Будет применено всем дивам которые следуют после вашего #content т.е. например в коде
<div id="content" >
 <div></div>
 <ul>
  <li>
   <div></div>
   </li>
  </ul>
</div>
стиль #content div будет применён к диву перед списокм И к диву внутри списка ul. Короче говоря ко ВСЕМ дивам идущим внутри блока с айдишкой #content
Для того что бы применить только к дочернему элементу, нужно записать селектор вот так #content > div

Запутался совсем, пока читал.

В чем тогда отличия между:

#content div{

}

#content div div{

}

Если бы #content div применялся ко всем дивам вложенным в него, то почему #content div div обращается ко второму диву? . Где я ошибаюсь???

deadrash · January 2, 2011

Запутался совсем, пока читал.
В чем тогда отличия между:
#content div{
}
#content div div{
}
Если бы #content div применялся ко всем дивам вложенным в него, то почему #content div div обращается ко второму диву? . Где я ошибаюсь???

Вообще ни в чём не ошибаетесь, просто само выражение #content div div{} совершенно бессмысленно.

Вот если записать #content dd div{} тогда выражение имеет смысл, и стиль будет применён ко всем блокам div которые находятся внутри блока dd, который в свою очередь находится внутри элемента с айдишкой #content

например в такой разметке

<div id="content" >
 <div></div>
 <dl>
  <dt></dt>
  <dd>
   <div></div>
  </dd>
 </dl>
</div>

Стиль #content dd div{} будет применён только к блоку div внутри dd а блок div перед списком dl будет проигнорирован.

Edited January 2, 2011 by deadrash

icp · January 2, 2011

Вообще ни в чём не ошибаетесь, просто само выражение #content div div{} совершенно бессмысленно.
Вот если записать #content dd div{} тогда выражение имеет смысл, и стиль будет применён ко всем блокам div которые находятся внутри блока dd, который в свою очередь находится внутри элемента с айдишкой #content
например в такой разметке
<div id="content" >
 <div></div>
 <dl>
  <dt></dt>
  <dd>
   <div></div>
  </dd>
 </dl>
</div>
Стиль #content dd div{} будет применён только к блоку div внутри dd а блок div перед списком dl будет проигнорирован.

Набросал тестик:

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>TODO supply a title</title>
		<style>
			#wrapper{
				margin:		0 auto;
				width:		1000px;
			}

			#wrapper div{
				background: yellow;
				width:  100px;
				height: 100px;
			}
			#wrapper div div{
				background: red;
				width:  90px;
				height: 90px;
			}
			#wrapper div div div{
				background: green;
				width:  80px;
				height: 80px;
			}

		</style>

	</head>
	<body>
		<div id="wrapper">
			<div>
				<div>
					<div>


					</div>

				</div>
			</div>		
		</div>
	</body>
</html>

Получается, если #wrapper div действует на все вложенные элементы див, то кубики были бы одного желтого цвета. Но это не так.

Где подвох?

deadrash · January 2, 2011

Ээээ ... с вами сам себя запутал =)))

В общем подвох в этих словах

выражение #content div div{} совершенно бессмысленно.

Прошу прощения, конечно это имеет смысл.

#content div{} - ко всем div внутри #content

#content div div{} - ко всем div внутри div, которые внутри #content

#content div div div{} - ко всем div внутри div, которые внутри div, которые внутри #content

Edited January 2, 2011 by deadrash

icp · January 2, 2011

Ээээ ... с вами сам себя запутал =)))
В общем подвох в этих словах
Прошу прощения, конечно это имеет смысл.
#content div{} - ко всем div внутри #content
#content div div{} - ко всем div внутри div, которые внутри #content
#content div div div{} - ко всем div внутри div, которые внутри div, которые внутри #content

У меня уже мозг закипать начал :-D С таким подвохом еще не сталкивался.

#content div{} - cудя по тесту, селектор срабатывает для прямого потомка div, хотя для прямого надо юзать #content > div.

Однако #content div действовать должен все-таки должен на все внутренние дивы, то как же так получается, что он не перекрывает дейтвия #content div div и #content div div div ???

deadrash · January 2, 2011

У меня уже мозг закипать начал :-D С таким подвохом еще не сталкивался.
#content div{} - cудя по тесту, селектор срабатывает для прямого потомка div, хотя для прямого надо юзать #content > div.
Однако #content div действовать должен все-таки должен на все внутренние дивы, то как же так получается, что он не перекрывает дейтвия #content div div и #content div div div ???

Ответ очень прост, он кроется в весе селекторов, который описан по этой ссылке http://cssing.org.ua/2005/06/09/css-selectors-weight/

Селекторы с бОльшим весом имеют приоритет, по этому хотя #content div и задаёт стиль всем вложенным div, но его перекрывает стиль #content div div который имеет бОльший вес. так что всем блокам div находящимся внутри div которые внутри #content задаётся уже другой стиль.

icp · January 2, 2011

Ответ очень прост, он кроется в весе селекторов, который описан по этой ссылке http://cssing.org.ua/2005/06/09/css-selectors-weight/
Селекторы с бОльшим весом имеют приоритет, по этому хотя #content div и задаёт стиль всем вложенным div, но его перекрывает стиль #content div div который имеет бОльший вес. так что всем блокам div находящимся внутри div которые внутри #content задаётся уже другой стиль.

Ясненько, спасибо))) Буду знать теперь.

Temiks · January 3, 2011

Для того что бы применить только к дочернему элементу, нужно записать селектор вот так #content > div

спасибо вам огромное

Sign In

Вложенность, селекторы (непонятное поведение)

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information