背景 Meta CSS是一个很简单的CSS框架。可以点这里(下载)先一睹为快。 在深入介绍之前，我们来考虑几个web开发者非常容易遇到的问题： 同样的一个款式的按钮，有些页面它要在左边，但是有些页面要在右边 同样作用的一段提示文字，有些地方字体要大号，有些却要小号 同样风格的一段文字，有些要红色，有些却要绿色 这样的状况是相当频繁的。对此，通常有4种解决方法： 每种不同款式，定义一个css。按钮A一个css，按钮B虽然长得跟A一样，但是在右边，那就copy下A的css代码，然后改成在右边。 .a{/* 很多样式定义 */} .b{/* 很多样式定义 */ text-align:center;} .c{/* 很多样式定义 */ text-align:right;} <div class=”a”>按钮A</div> <div class=”b”>按钮B</div> <div class=”c”>按钮C</div> 针对不同地方，利用css层级覆盖来实现。比如按钮A设定css，然后对于特别的页面，设定特别的css来覆盖 .a{/* 很多样式定义 */} #s1 .a{text-align:center;} #s2 .a{text-align:right;} <div class=”a”>按钮A</div> <div id=”s1″><div class=”a”>按钮B</div></div> <div id=”s2″><div class=”a”>按钮C</div></div> 利用css组合来实现。如上面的代码片段，设定css基础类，然后进行组合。对于按钮A，它的class为x，在右边的按钮B，它的class为x tar，对于B来说，它的样式就是x与tar组合起来的。 .a{/* 很多样式定义 */} .tac{text-align:center;} .tar{text-align:right;} <div class=”a”>按钮A</div> <div class=”a tac”>按钮B</div> <div [...]