資訊專欄INFORMATION COLUMN
摘要：使用子選擇器，會增加選擇符的權重，的選擇符權重越高，樣式越不易被覆蓋，所以除非確定結構非常穩定，一定不會再修改了，否則盡量使用子選擇器。在進過大量實踐后，我并不認為多有太大的壞處，相反，與使用子選擇器相比，新添加反而跟利于維護。
CSS設置的樣式是可以層疊的，如下面[代碼1]
[代碼1]
CSS的低權重原則
“CSS的低權重原則”既可以的到“font-size:40px”的樣式，又可以得到“color： red”的樣式。如果兩個不同選擇符設置的樣式有沖突，又會如何？如下面[代碼2]
[代碼：CSS層疊有沖突的情況]
CSS的低權重原則
“CSS的低權重原則”顏色會是什么呢？是對“span”設置的“color:green”呢，還是第“.test”設置的“color:red”呢？這就涉及CSS選擇符的權重問題了。
CSS的選擇符是有權重的，當不同選擇符的樣式設置有沖突時，會采用權重高的選擇符設置的樣式。權重的規則是這樣的：HTML標簽的權重是1，class的權重是10，id的權重是100，例如p的權重是1，“div em”的權重是1+1=2，“strong.demo”的權重是10+1=11，“#test.red”的權重是100+10=110.
[代碼2]中，選擇符span的權重是1，“.test”的權重是10，所以“CSS的低權重原則”的color應該是red。
但是如果是如下[代碼3]時，又會如何呢？
CSS的低權重原則
span的標簽同時掛了test和test2兩個class，他們的權重都是10，那么“CSS的低權重原則”的color又該是哪個呢？如果 CSS選擇符權重相同，那么樣式就遵循就近原則，哪個選擇符后定義，就采用哪個選擇符的樣式。[代碼3]中test2后定義，所以color會采用“.test2”的設置為green。
如果改變“.test”和“.test2”定義的位置，如[代碼4]
CSS的低權重原則
那么 “CSS的低權重原則”的color就為red了。
需要強調的是就近原則指的是選擇符 的先后順序，而不是掛class名的先后順序，CSS的低權重原則和CSS的低權重原則沒有區別。
CSS選擇符權重是個容易被忽略的問題。但事實上如果不太注意選擇符的權重，常會出現意向不到的小麻煩。例如下面[代碼5]
CSS的選擇符權重很重要
現在需要將“很重要”三個字設置為紅色，我們應該怎么做呢？
方案一，利用子選擇器，如[代碼6]
CSS的選擇符權重很重要
方案二，新建class，如[代碼7]
CSS的選擇符權重很重要
很多工程師推薦使用方案一，因為使用子選擇器可以避免新增class，讓HTML代碼更簡潔，這么考慮是有道理的，但如果這時需求有變化，需要添加新的額文字進來，如[代碼8]
CSS的選擇符權重很重要，我們要小心處理
要求我們將“小心處理”設置為綠色，我們可以這么做，如[代碼9]
CSS的選擇符權重很重要，我們要小心處理
本以為小心處理會被選擇符font設置為綠色，但它卻被選擇符權重更高的“#test span”設置成了紅色，子選擇器在無意中影響到了我們新添加的代碼。如果想要達到我們的預期，我們需要按代碼[9]重寫
CSS的選擇符權重很重要，我們要小心處理
而如果使用方案二呢？
CSS的選擇符權重很重要，我們要小心處理
因為沒有使用子選擇器，所以我們添加新代碼掛上新的class就可以順利的完成樣式的設置了。
使用子選擇器，會增加CSS選擇符的權重，CSS的選擇符權重越高，樣式越不易被覆蓋，所以除非確定HTML結構非常穩定，一定不會再修改了，否則盡量使用子選擇器。為了保證樣式容易被覆蓋，提高可維護性，CSS選擇符權重盡可能低。
少用子選擇器，就需要多添加class，在Web標準盛行的初期，很多工程師認為多添加class是不好的，如果能使用子選擇器就應該盡量使用，使用大量的class的做法叫做“多class癥”。在進過大量實踐后，我并不認為多class有太大的壞處，相反，與使用子選擇器相比，新添加class反而跟利于維護。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115196.html
摘要：通用選擇器，子選擇器和相鄰同胞選擇器并不在這四個等級中，所以他們的權值都為，優先級最高，萬不得已的情況下才用。規范命名風格規范文件命名統一為小寫的英文字母盡量少用拼音，如。當名字需要組合時，可以采用文件名的規范。 css樣式的權值(權重) 權值等級的定義 第一等：代表內聯樣式，如: style=，權值為1000。第二等：代表ID選擇器，如：#content，權值為100。第三等：代表類...
? 本文內容： ? 層疊性 繼承性 優先級 權重計算方法（特異性） ? ? 首發日期：2018-05-01 層疊性： 層疊性是指當一個標簽被設置了多個重復的樣式的時候，一個屬性會覆蓋另外一個屬性。 比如：先給div設置背景顏色為紅色，然后設置背景顏色為粉紅色，那么最終顏色可能為紅色，也可能為粉紅色（明顯的兩種顏色設置不能并立，所以只為其一，這里沒給出確定答案是因為還要考慮優先級...
摘要：國內各大公司都已經投入使用，在一些常見的網站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現； 作用于某個元素上的樣式又可能來自單個樣式規...
摘要：國內各大公司都已經投入使用，在一些常見的網站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現； 作用于某個元素上的樣式又可能來自單個樣式規...
摘要：之小白初入江湖超文本標記語言簡稱是一種用于創建網頁的標準標記語言。描述了一個網站的結構語義隨著線索的呈現，使之成為一種標記語言而非編程語言。是塊級元素，是行內元素。層疊樣式表簡稱是一種用來為結構化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標記語言(HyperText Markup Language, 簡稱HTML)是一種用于創建網頁的標準標記語言...
閱讀 1308·2021-11-04 16:09
閱讀 3509·2021-10-19 11:45
閱讀 2404·2021-10-11 10:59
閱讀 1018·2021-09-23 11:21
閱讀 2770·2021-09-22 10:54
閱讀 1146·2019-08-30 15:53
閱讀 2612·2019-08-30 15:53
閱讀 3484·2019-08-30 12:57
