HTML/CSS/Layout/Position Selector
Содержание
Descendant Selector
<!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>
<title></title>
<style type="text/css">
div *.my-class {
font-size:1.2em;
font-weight:bold;
}
</style>
</head>
<body>
<p class="my-class">p.my-class</p>
<div id="my-id">
<ol>
<li>div ol li</li>
<li>div ol li</li>
<li>
<p class="my-class">div ol li p.my-class </p>
</li>
</ol>
</div>
</body>
</html>
Descendant Selector: id element
<!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>
<title></title>
<style type="text/css">
#my-id p {
background-color:gold;
}
</style>
</head>
<body>
<p class="my-class">p.my-class</p>
<div id="my-id">
<ol>
<li>div ol li</li>
<li>div ol li</li>
<li>
<p class="my-class">div ol li p.my-class </p>
</li>
</ol>
</div>
</body>
</html>
Position Selectors Demo
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div * .my-class {
font-size: 1.2em;
font-weight: bold;
}
</style>
</head>
<body>
<p class="my-class">p.my-class</p>
<div id="my-id">
<ol>
<li>div ol li</li>
<li>div ol li</li>
<li>
<p class="my-class">div ol li p.my-class </p>
</li>
</ol>
</div>
</body>
</html>
To select descendant elements
<!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>
<title></title>
<style type="text/css">
#my-id p { background-color:gold; }
</style>
</head>
<body>
<p class="my-class">p.my-class</p>
<div id="my-id">
<ol>
<li>div ol li</li>
<li>div ol li</li>
<li>
<p class="my-class">div ol li p.my-class </p>
</li>
</ol>
</div>
</body>
</html>