继承──页面重构中的模块化设计（三）

最新推荐文章于 2025-10-21 01:46:02 发布

转载最新推荐文章于 2025-10-21 01:46:02 发布 · 365 阅读

Web架构专栏收录该内容

11 篇文章

订阅专栏

前面我们了解了样式的作用域的分类和栏目级作用域。在权值中，还有一个很重要的因素，需要做下补充，起因是这样的，有个同学在CSS森林群里问了个问题：根据样式权值两个关键的因素

权值的大小跟选择器的类型和数量有关
样式的优先级跟样式的定义顺序有关

可以知道，如果10个标签选择器的权值应该比一个类选择的权值高，像这样：


div div div div div div div div div div div{color:blue;}
.c10{color:red;}


<div class="c1">
  <div class="c2">
    <div class="c3">
      <div class="c4">
        <div class="c5">
          <div class="c6">
            <div class="c7">
              <div class="c8">
                <div class="c9">
                  <div class="c10">
                     <div>这段文字是什么颜色？</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

先别急着看答案，分析下。意料之中？如果这样呢？


div{color:blue;}
.c10{color:red;}

是不是跟想的不太一样？难道前面所说的权值是有问题的？前面讲的权值并没有问题，不过漏了一个重要的规则： 继承的权值小于0,0,0,1 。

样式的继承

指被包在内部的标签将拥有外部标签的样式性质。

继承最大的意义在于可以减少重复的定义，比如要定义整个页面的文本颜色，只需要定义body的color样式，body里的所有标签都会继承body的color定义。是不是很方便？方便是相对的，当你想要为body内部分标签定义另一种文本颜色时，继承也许会成为增加重复定义、降低性能的祸首。

并不是所有的样式定义都具有继承的性质，整理了一下常用有继承性的定义¹，这些定义在使用的时候要比较注意。

简单分析下上面的例子，最后一部分的代码：


<div class="c10">
    <div>这段文字是什么颜色？</div>
</div>

当定义了c10后，根据权值，类定义的权值是0,0,1,0，应该是比div这个定义0,0,0,1要高的，但由于div是直接定义到标签上的，比起从c10的定义中继承来的定义权值更高。稍微改下就清楚了：


<div class="c1">
  <div class="c2">
    <div class="c3">
      <div class="c4">
        <div class="c5">
          <div class="c6">
            <div class="c7">
              <div class="c8">
                <div class="c9">
                  <div class="c10">
                     <p>这段文字是什么颜色？</p>
                     <div>这段文字是什么颜色？</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

从修改后的例子可以看到，p标签继承了c10的定义，显示为红色。因此，在使用标签选择器的时候，应特别注意它的作用域，个人的建议是，除了最基本的reset之外，在公共作用域中最好不要使用标签选择器，在栏目级作用域中也应尽可能的少用。

¹ 常用有继承性的样式定义：