二、继承性
2.1、具有继承性的相关属性
继承性：文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效。
具有继承性的有属性有：
color font-xxx list-xxx text-xxx line-xxx 使用场景：由于文字相关属性有继承性，通常会设置body标签的字号，颜色，行高等，这样就可以当做整个网页的默认样式了。 <style> body { font-size: 15px; line-height: 1.2; font-weight: bold; font-family: '微软雅黑'; color: red; } </style> <body> <div class="div1"> <div class="div2"> 长路&林儿；长路&林儿；长路&林儿；长路&林儿；长路&林儿； </div> </div> </body>
效果：
2.2、继承性—就近原则
就近原则：在继承的情况下，选择器权重计算失效，而是根据"就近原则"。
情况一：继承性与对应标签直接设置属性，直接设置属性权重大。
<style> /* 通过继承性 */ .class1 .class2 .class3 { color: red; } /* p标签直接设置属性：权重最大 */ p { color: gold; } </style> <body> <div class="class1" id="id1"> <div class="class2" id="id2"> <div class="class3" id="id3"> <p>我是长路</p> </div> </div> </div> </body>
情况二：根据继承性比较哪个继承距离更近，更近的权重大。
<style> /* 继承性：距离p元素最近的是第二个div */ #id1 .class2 { color: red; } /* 继承性：举例p元素最近的是滴三个div，所以该权重更大 */ #id1 .class3 { color: gold; } </style> <body> <div class="class1" id="id1"> <div class="class2" id="id2"> <div class="class3" id="id3"> <p>我是长路</p> </div> </div> </div> </body>
情况三：若是都是继承性相关，距离都是相同的，根据权重来比较。
<style> /* 由于两个距离相同，都是最近的class3，所以要按照权重来进行比较 */ /* 继承性：权重为(0,3,0) */ .class1 .class2 .class3 { color: red; } /* 继承性：权重为(1,2,0),所以这里更大 */ #id1 .class2 .class3 { color: gold; } </style> <body> <div class="class1" id="id1"> <div class="class2" id="id2"> <div class="class3" id="id3"> <p>我是长路</p> </div> </div> </div> </body>
