CSS后代选择器

来源：互联网发布：bim建筑设计下那个软件编辑：程序博客网时间：2024/04/30 05:01
代码如下：
<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>
运行结果如下：