Как задавать свойства для вложенных списков

clavin · November 18, 2010

Столкнулся с непонятным поведением списков <ul>, вложенных в другие списки.

Вот тестируемый код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Language" content="ru" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<title></title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="robots" content="index,follow" />
	<link rel="icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" media="all" type="text/css" href="" />
	<style type="text/css" media="all">/*<![CDATA[*/
* {
	padding:0;
	margin:0;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
em, strong, img, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	vertical-align: baseline;
	background: transparent;
}

a {
	cursor:pointer;
}

body {
	color:#000000;
	font-family:Arial, Helvetica, Verdana, sans-serif;
	font-variant:normal;
	font-weight:normal;
	font-size:100%;
	background:#ffffff;
}

#mydiv {background:red; padding:30px;}
#mydiv div {background:yellow; padding:30px; color:#fff;}
#mydiv ul.spy { width:400px; background:maroon; color:red;}
#mydiv ul.spy li {width:200px; background:lime;}
#mydiv ul.spy li ul.spy2 {width:100px; background:blue;}

	/*]]>*/</style>
</head>
<body>

<div id="mydiv">
	<p>text</p>
	<div>
		<ul class="spy">
			<li>item 1</li>
			<li>item 2
				<ul class="spy2">
					<li>item 3</li>
					<li>item 4</li>
				</ul>
			</li>
		</ul>
	</div>
</div>

</body>
</html>

как задавать свойства для вложенных в li других списков ul? Браузеры показывают (можно увидеть, например, firebug'ом), что стили для вложенного ul установлены, но на экране они не отображаются.

В то же время, если задать стили так (добавить в конец li)

#mydiv ul.spy li ul.spy2 li {width:100px; background:blue;}

то на экране появляется синий фон.

Edited November 18, 2010 by clavin

Great Rash · November 18, 2010

Так вы ж для всех <li> задали желтый фон, вот этой записью:

#mydiv ul.spy li {width:200px; background:lime;}

Чтобы все работало как хочется, добавьте следующий код:

#mydiv ul.spy li li {background: none;}

Столкнулся с непонятным поведением списков <ul>, вложенных в другие списки.

Эх, теорию вам подучить надо. Читать до полного просветления!

clavin · November 19, 2010

Great Rash, спасибо!

Со списками запутался.

Свойство list-style является наследуемым, поэтому задав его для ul, можно быть уверенным, что оно автоматически распространится и на li. С фоном это не так. Ещё раз спасибо, всё на свои места встало.

Sign In

Как задавать свойства для вложенных списков

Question

clavin

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

clavin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information