代码如下:
<html>
<head>
<style type="text/css">
p {text-align: center;}
.important {color: red;}
p.important {background:silver;} /* 完全等同于:p[class="important"] {background:silver;} */
.important div {background: purple;} /* 注意:这是后代选择器。有关后代选择器有一个易被忽视的方面,即两个元素之间的 层次间隔 可以是 无限 的 */
</style>
</head>
<body>
<p>1. Just a paragraph</p>
<div class="important">2. div with class</div><!-- 应用: .important {color: red;} -->
<!-- 注意: 应用三个:p {text-align: center;};.important {color: red};p.important {background:silver;} -->
<p class="important">3. paragraph with class</p>
<p>4. Paragraph and div<!-- 应用: p {text-align: center;} -->
<!-- 注意:不会应用:p.important {background:silver;} -->
<div class="important">4. 1 div with class</div><!-- 应用:.important {color: red;} -->
</p>
<!-- 注意:对后代选择器,两个元素间层次间隔是无限的 -->
<div class="important">5. div with class<!-- 应用:.important {color: red;} -->
<div style="background: green">5. 1I have green background<!-- 应用: .important {color: red},然后被就近的给覆盖掉 -->
<div style="background: yellow">5. 2 I have yellow background<!-- 应用: .important {color: red},然后被就近的给覆盖掉 -->
<div>5. 3 I have nothing, but I'll have .important div {background: purple;} </div><!-- 应用: .important div {background: purple;};而且会是红色,因为最上的div应用了 .important {color: red;} -->
</div>
</div>
</div>
</body>
</html>
运行结果如下: