CSS更簡潔高效的技巧

大家知道CSS更簡潔高效嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

所謂高效的CSS就是讓浏覽器在查找style匹配的元素的時候盡量進行少的查找，下面列出一些我們常見的寫CSS犯一些低效錯誤(也是我以前常常犯的錯誤，還老以為這樣寫才是高效的)：

1、不要在ID選擇器前使用標簽名

一般寫法：DIV#divBox

更好寫法：#divBox

解釋： 因為ID選擇器是唯一的，加上div反而增加不必要的匹配。

2、不要再class選擇器前使用標簽名

一般寫法：span.red

更好寫法：.red

解釋： 同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css文件中定義如下：

p.red{color:red;}

span.red{color:#ff00ff}

如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫

3、盡量少使用層級關系

一般寫法：#divBox p .red{color:red;}

更好寫法：.red{..}

4、使用class代替層級關系

一般寫法：#divBox ul li a{display:block;}

更好寫法：.block{display:block;}

相信大家已經學會CSS更簡潔高效了吧!感謝大家對我們網站的支持!

相關推薦：

css網頁布局口訣是啥