将各个HTML标记看作一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。

1、父子关系

所有的CSS语句都是基于各个标记之间的父子关系的。

<html>
<head>
<title>父子关系</title>
</head>
<body>
<h1>祖国的首都<em>北京</em></h1>
<p>欢迎来到祖国的首都<em>北京</em>,这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p>
<ul>
    <li>在这里，你可以：
        <ul>
              <li>感受大自然的美丽</li>
              <li>体验生活的节奏</li>
              <li>领略首都的激情与活力</li>
        </ul>
    </li>
    <li>你还可以：
        <ol>
               <li>去八达岭爬长城</li>
               <li>去香山看红叶</li>
               <li>去王府井逛夜市</li>
        </ol>
    </li>
</ul>
</body>
</html>

 

 

2、CSS继承的运用

CSS继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。

CSS的继承一直贯穿整个CSS设计的始终，每个标记都遵循这CSS继承的概念。

大大缩减代码的编写量，并提高可读性，尤其是在页面内容很多，父子关系庞杂的时候。

<html>
<head>
<title>父子关系</title>
<style type="text/css">
<!--
h1{
    color:red;
    text-decoration:underline;
}
h1 em{
    color:#004400;
    font-size:40px;
}
.li1{
    color:red;
}
.li2{
    color:blue;
}
ul li ol{
    font-weight:bold;
    text-decoration:underline;
}
-->
</style>
</head>
<body>
<h1>祖国的首都<em>北京</em></h1>
<p>欢迎来到祖国的首都<em>北京</em>,这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p>
<ul>
    <li class="li1">在这里，你可以：
        <ul>
              <li>感受大自然的美丽</li>
              <li>体验生活的节奏</li>
              <li>领略首都的激情与活力</li>
         </ul>
    </li>
    <li class="li2">你还可以：
        <ol>
             <li>去八达岭爬长城</li>
             <li>去香山看红叶</li>
             <li>去王府井逛夜市</li>
        </ol>
    </li>
</ul>
</body>
</html>