在css中的冲突

Question

在我的项目中，我有很多css文件，这使得它们相互冲突。

项目中的所有元素应该有流动的CSS样式

*, *:after, *:before { 
    box-sizing: border-box; } 

虽然只有不应该有这样的CSS

<div id="WebcamPopup"> 
..... 
</div> 

是有一个解决这个问题的对话？

Answer 1

#WebcamPopup, #WebcamPopup *, #WebcamPopup *:after, #WebcamPopup *:before { 
    box-sizing:content-box; 
} 

话虽如此 - 你展示正是为什么你不应该做侵入性的东西一样box-sizing覆盖全球。

Answer 2

一种选择可重写boz-sizing该特定选择器：

#WebcamPopup, 
#WebcamPopup:before, 
#WebcamPopup:after { box-sizing: content-box; } 

的box-sizing的初始值为content-box。

6.1. ‘box-sizing’ property

内容盒
这是宽度和高度由CSS2.1指定的行为。指定的宽度和高度（以及相应的最小/最大属性 ）分别适用于元素的 内容框的宽度和高度。元素的填充和边框是 ，在指定的宽度和高度以外绘制和绘制。

你也可以使用，如果它是一个选项initial关键字，但请注意，它不是在IE浏览器的支持。