樣式選擇器的優先級是學習樣式的基礎知識，一起簡單回顧下：

標簽的權值為0,0,0,1
    類的權值為0,0,1,0
    屬性選擇的權值為0,0,1,1
    ID的權值為0,1,0,0
    important的權值為高1,0,0,0

使用的規則也很簡單，就是 選擇器的權值加到一起，大的優先；如果權值相同，后定義的優先 。雖然很簡單，但如果書寫的時候沒有注意，很容易就會導致CSS的重復定義，代碼冗余。

從上面我們可以得出兩個關鍵的因素：

權值的大小跟選擇器的類型和數量有關
    樣式的優先級跟樣式的定義順序有關

了解樣式的權值后有什么作用呢？比如可以這樣用：舉一個最簡單的例子，

body{color:#555555;}.demo{color:#000000;}

<p>這里的文字顏色受全局定義的影響</p>
<div class="demo"><p>這里的文字顏色受類demo定義的影響</p></div>
<p class="demo">這里的文字顏色受類demo定義的影響</p>

模塊化設計我已經提過很多了，像《 從宜家的家具設計講模塊化 》、《 頁面重構中的模塊化思維 》、《 頁面重構中的組件制作要點 》都是跟模塊化相關的，不過之前一直沒有講到具體實現方面的內容，只是一些思維。這次重點講一下實現方面的內容，權當到目前為止我對模塊化的一些總結整理。

要做好模塊化，我覺得理解好樣式的作用域是很重要的，所以將這部分作為這個系列的第一篇。

寫過程序的同學應該都知道，變量是有作用域的，樣式的定義也同樣存在著作用域的問題，即定義的作用范圍，很容易就能理解，如下面的p的作用域：

/*作用域：全局*/ p{text-indent:2em;}

/*作用域：.demo這個類中*/ .demo p{color:#000000;}

分享名稱：模塊化設計樣式的作用域
轉載來于：http://www.js-pz168.com/news11/170911.html

成都網站建設公司_創新互聯，為您提供小程序開發、云服務器、網站建設、電子商務、做網站、定制網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯