css抄页面,如何正确的抄网页

box model

为了加一个新功能，抄了部分页面顺带一大坨 css 代码，结果原有部分页面样式就乱掉了。罪魁祸首就是两者的盒模型不同(如上图)，其中 W3C 模型也被成为 standards mode，IE 模型也被称为 quirks mode。当然部分选择器相同也产生了污染。

在调查原因的过程中，发现一个做法可以很好的分隔开不同来源的 css。即在利用 less 的 mixin 特性，在新加入的 css 外套一层选择器，在这层选择器内定义相应的盒模型，然后将相关的 html 外也套一个对应的选择器，这样就完成了隔离。

举个栗子，A 站是 quirks mode，从该站抄来部分代码如下

html

...

...

css

#header { color: #6c94be;}

...

首先对 css 加入外层的自定义选择器进行隔离，同时定义盒模型(本例为 quirks mode)

.site-a,

.site-a *,

.site-a *:before,

.site-a *:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

#header { color: #6c94be;}

...

}

以上 less 部分编译后生成的 css 将会限定在 .site-a 的子元素内生效。

然后在相关 html 中也套入对应选择器