在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瀏覽器的支持。