继承──页面重构中的模块化设计(三)

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

评论列表