繼承──頁面重構中的模塊化設計（三）

前面我們瞭解了 樣式的作用域的分類 和 欄目級作用域 。在權值中，還有一個很重要的因素，需要做下補充，起因是這樣的，有個同學在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之外，在公共作用域中最好不要使用標籤選擇器，在欄目級作用域中也應儘可能的少用。

¹ 常用有繼承性的樣式定義：

• text-indent
• text-align
• layout-flow
• writing-mode
• line-break
• white-space
• word-wrap
• list-style
• list-style-image
• list-style-position
• list-style-type
• font
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
• color
• text-transform
• letter-spacing
• word-spacing

文章地址：http://www.cssforest.org/blog/index.php?id=164