CSS继承性详解：让你的样式更智能

文本相关的属性一般具有继承性，即给祖先设置的样式，同样被后代标签所继承。

通常具有继承性样式

• color 文本颜色。
• font-weight、font-family、font-size 等以font开头的通常和文本相关的属性。
• text-indent、text-align 等以 text开头的通常和段落相关的属性。
• line-height 等 以line开头的属性。
• list-style 等 以 list开头的属性。

在实践过程中，通常我们会 设置一些通用的全局属性，比如背景色、字号等， 设置在 HTML的body标签上，这样默认的所有body下的子标签都具有了此样式。

在继承的情况下，选择器权重失效（了解选择器权重）从而遵循 就近原则， 标签会选择距离自己最近的样式。

<!--以下根据就近原则， 文字展示绿色--><style>    #box1 #box2 #box3 {        color: red;    }    p {        color: green;    }</style><div id="box1" class="box1">    <div id="box2" class="box2">        <div id="box3" class="box3">            <p>测试文字样式</p>        </div>    </div></div><!--以下根据就近原则，显示蓝色--><style>    #box1 #box2 {        color: red;    }    .box2 .box3 {        color: blue;    }</style><div id="box1" class="box1">        <div id="box2" class="box2">            <div id="box3" class="box3">                <p>测试文字样式</p>            </div>        </div></div>