大家知道高效的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是怎麼設置了吧!感謝大家對我們網站的支持!
相關推薦:
divcss頁面正文怎麼設置