divcss避免濫用子選擇器的方法

大家知道divcss避免濫用子選擇器?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。CSS的選擇符是有權重的，當不同選擇符的樣式設置有沖突時，會采用權重高的選擇符設置的樣式。

如果CSS選擇符權重相同，那麼樣式會遵循就近原則，哪個選擇符最後定義，就采用哪個選擇符的樣式。

如果忽略了CSS選擇符權重，會產生意想不到的小麻煩。

需求與方案

復制代碼代碼如下:

 

CSS 選擇符權重很重要

現在需要將“很重要”三個字設置為紅色，我們的做法如下：

方案一，利用子選擇器

復制代碼代碼如下:

 

CSS 選擇符權重很重要

方案二，新建class

復制代碼代碼如下:

 

CSS 選擇符權重很重要

很多工程師推薦使用方案一，因為使用子選擇器可以避免新增class，讓HTML代碼更簡潔。這麼考慮是有道理的，但如果這時需求有變化，需要添加新的文字進來。

改變需求

復制代碼代碼如下:

 

CSS 選擇符權重很重要， 我們要小心處理

要求將‘小心處理’設置為綠色，我們可能會這樣做。

復制代碼代碼如下:

 

 

CSS 選擇符權重很重要， 我們要小心處理

本以為‘小心處理’會設置為綠色，但被權重更高的#test span設置為紅色。子選擇器在無意中影響到了我們新添加的代碼。如果想要達到我們的預期，重寫代碼如下

復制代碼代碼如下:

 

 

CSS 選擇符權重很重要， 我們要小心處理

而如果使用方案二，情況會怎麼樣呢

復制代碼代碼如下:

 

CSS 選擇符權重很重要，我們要小心處理

因為沒有子選擇器，所以我們給新添加的代碼掛上新的class，就可以順利地完成樣式設置了。

小結

使 用子選擇器，會增加CSS選擇符的權重，CSS選擇符權重越高，樣式越不容易被覆蓋，越容易對其他選擇符產生影響。所以，除非確定HTML結構非常穩定， 不會再修改了，否則盡量不要使用子選擇器。為了保證樣式容易被覆蓋，提高可維護性，CSS選擇符需要保證權重盡可能低。

低權重原則——避免濫用子選擇器

相信大家已經學會divcss避免濫用子選擇器吧!感謝大家對我們網站的支持!

相關推薦：

CSS常見技巧是什麼呢