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

由 Ghostzhang 发表于

前面我们了解了 样式的作用域的分类 和 栏目级作用域 。在权值中，还有一个很重要的因素，需要做下补充，起因是这样的，有个同学在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内部分标签定义另一种文本颜色时，继承也许会成为增加重复定义、降低性能的祸首。

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

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


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

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

效果展示

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

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

  • ext-indent
  • ext-align
  • ayout-flow
  • writing-mode
  • ine-break
  • white-space
  • word-wrap
  • ist-style
  • ist-style-image
  • ist-style-position
  • ist-style-type
  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • ine-height
  • font-family
  • color
  • ext-transform
  • etter-spacing
  • word-spacing

系列文章

讨论