http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FStyle_Basics%2FSibling_Selector
HTML/CSS/Style Basics/Sibling Selector - История изменений
2026-04-04T12:08:08Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/Sibling_Selector&diff=5966&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/Sibling_Selector&diff=5967&oldid=prev
Admin: 1 версия
2010-05-26T08:17:27Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add tag together==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div {<br />
position: absolute;<br />
padding: 10px;<br />
border: 1px solid black;<br />
opacity: 0.9;<br />
background: #ccc;<br />
width: 100px;<br />
height: 100px;<br />
top: 20px;<br />
left: 20px;<br />
z-index: 4;<br />
}<br />
div + div {<br />
background: lightblue;<br />
top: 40px;<br />
left: 40px; <br />
z-index: 3;<br />
}<br />
div + div + div {<br />
background: lightgreen;<br />
top: 60px;<br />
left: 60px;<br />
z-index: 2;<br />
}<br />
div + div + div + div {<br />
background: pink;<br />
top: 80px;<br />
left: 80px;<br />
z-index: 1;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div>div1</div><br />
<div>div2</div><br />
<div>div3</div><br />
<div>div4</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==direct adjacent sibling combinator==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<style type="text/css"><br />
h2 ~ h3 {<br />
text-decoration: underline;<br />
font-size: 22px;<br />
color: lightgreen;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<h2><br />
Welcome to CSS widgets.<br />
</h2><br />
<p><br />
This paragraph of text is indented 20 pixels.<br />
</p><br />
<h3><br />
Some underlined text.<br />
</h3><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Direct Adjacent Sibling Combinators==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<style type="text/css"><br />
label + input, label + select, label + textarea {<br />
background: darkgray;<br />
}<br />
</style><br />
<title>Feedback Form - Widgets and What"s-its</title><br />
</head><br />
<body><br />
<h1>Widgets and What"s-its</h1><br />
<form><br />
<h2>Tell us what"s on your mind..</h2><br />
<div><br />
<label for="feedback[name]">Name:</label><br />
<input type="text" size="25" name="feedback[name]" /><br />
</div><br />
<div><br />
<label for="feedback[email]">Email:</label><br />
<input type="text" size="25" name="feedback[email]" /><br />
</div><br />
<div><br />
<label for="feedback[address]">Address:</label><br />
<textarea name="feedback[address]" cols="40" rows="3" wrap="virtual"></textarea><br />
</div><br />
<div><br />
<label for="feedback[message]">Comments:</label><br />
<textarea name="feedback[message]" cols="40" rows="6" wrap="virtual"></textarea><br />
</div><br />
<div><br />
<label for="feedback[heard]">How"d you hear about us?</label> <br />
<select name="feedback[heard]"><br />
<option value="">Choose...</option><br />
<option value="newspaper">Newspaper</option><br />
<option value="magazine">Magazine</option><br />
<option value="television">Television</option><br />
<option value="radio">Radio</option><br />
<option value="other">Other</option><br />
</select><br />
</div><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==img+p==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
h1 {<br />
margin: 0 0 .3em 0;<br />
padding: 0 0 .3em 0;<br />
border-bottom: 2px solid #666;<br />
}<br />
img+p {<br />
text-indent: 0;<br />
}<br />
p {<br />
margin: 0;<br />
padding: 0;<br />
text-indent: 2.5em;<br />
line-height: 1.5;<br />
}<br />
img {<br />
border: 1px solid red;<br />
width: 60%;<br />
max-width: 300px;<br />
float: left;<br />
margin-right: .7em;<br />
margin-bottom: .5em;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="frame"><br />
<h1>Constantly Checking Email</h1><br />
<img src="face.jpg" /><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==li + li==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>li + li </title><br />
<style type="text/css"><br />
li + li {<br />
font-size: 200%;<br />
}<br />
--><br />
</style><br />
</head><br />
<body><br />
<h1>Title of Page</h1><br />
<p>This is a sample paragraph with a <a href="http://www.wbex.ru" class="warning">link</a>. After p. <em class="warning"> in em</em>. After em.</p><br />
<ul id="navigation"><br />
<li class="warning"><a href="http://www.wbex.ru">A</a></li><br />
<li><a href="http://www.wbex.ru">B</a></li><br />
<li><a href="http://www.wbex.ru">C</a></li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Sibling Selector with +==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
li + li { font-style:italic; color:blue; }<br />
</style><br />
</head><br />
<body> <br />
<p class="my-class">p.my-class</p> <br />
<div id="my-id"> <br />
<ol> <br />
<li>div ol li</li> <br />
<li>div ol li</li> <br />
<li> <br />
<p class="my-class">div ol li p.my-class </p> <br />
</li> <br />
</ol> <br />
</div> <br />
</body> <br />
</html><br />
</source></div>
Admin