为了加快网页的加载速度,优化CSS文件,缩小CSS文件的大小是必须的,一个比较有用的技巧就是让你的每个CSS规则只出现一次(当然这里指的是相同的CSS规则),也就是使用分组选择器。
例如,我们可以合并下面的样式:
h1 { color: black; }
p { color: black; }
我们可以合并到一个样式中:
h1, p { color: black; }
上面是一个简单的合并,看不出来有什么很大的优化。下面这个比较复杂的样式可以让代码减少20-40%,请看这个例子:
h1, h2, h3 { font-weight: normal; }
a strong { font-weight: normal !important; }
strong { font-style: italic; font-weight: normal; }
#nav { font-style: italic; }
.note { font-style: italic; }
使用上面的分组选择器:
h1, h2, h3, strong { font-weight: normal; }
a strong { font-weight: normal !important; }
strong, #nav, .note { font-style: italic; }