繼承──頁面重構中的子產品化設計（三）

由 Ghostzhang 發表于 2010-04-16 13:24

前面我們了解了樣式的作用域的分類和欄目級作用域。在權值中，還有一個很重要的因素，需要做下補充，起因是這樣的，有個同學在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

繼承──頁面重構中的子產品化設計（三）繼承──頁面重構中的子產品化設計（三）

繼承──頁面重構中的子產品化設計（三）