2014-10-02 68 views
0

假設一個具有子節點的主體節點(例如div)。如何防止任何css風格的父節點繼承到子節點?

可能會附加到身體的css樣式,事先不知道(它們是特定於WWW上可訪問的任意頁面)。

子節點(例如div)有一堆靜態的CSS樣式。

如何防止家長的CSS風格「影響」孩子的造型?

+0

之類的東西寬度,字體大小,一般位置,字體家庭,和顏色基於父母的元素......通常更好的方法是在父母身上嘗試並覆蓋你的不斷變化的風格,然後根據你想要的具體情況來選擇更具體的類別或ID,這就是你如何覆蓋...... – 2014-10-02 12:28:03

+2

這會重複[阻止CSS繼承](http:// stackoverfl ow.com/questions/6206745/prevent-css-inheritance),這是問題的一般情況。 – 2015-09-02 10:26:44

回答

2

沒有通用的方法。您需要爲inherit爲默認值的每個屬性設置一個值(inherit除外)。

即使這樣也不能阻止所有的影響。

例如

body { width: 300px; } 
div { width: auto; } 

div的寬度受身體寬度的影響。

+0

是不是默認繼承的某些css屬性(沒有將該屬性設置爲在子節點上繼承)? – Scholle 2014-10-02 12:26:40

+0

@Scholle - 是的。爲什麼我會說在這個答案中爲這些屬性設置不同的值? – Quentin 2014-10-02 12:28:32

+1

@Scholle:這是正確的。你必須根據具體情況採取這種做法。沒有防彈的方法。一些CSS樣式是繼承的。其他人,雖然你可以指定相同的樣式,但由於CSS選擇器的優先級,可以覆蓋樣式。 – 2014-10-02 12:29:44

-1

您可以像這樣將所有屬性重置爲所需的默認值。

div *{ 
    property1:default; 
    .... 
    propertyx:deafult; 
} 
+0

是否有一個繼承的CSS屬性列表? – Scholle 2014-10-02 12:33:12

+2

它的'初始'不是'默認',並且尚未得到很好的支持。 – Quentin 2014-10-02 12:35:29

+0

這裏有一個屬性列表http://www.w3.org/TR/CSS21/propidx.html,顯示該屬性是否被繼承。 – 2014-10-02 12:37:59

2

你可以使用值initial(兼容性:不通過IE在所有支持的)和unset(Fx27只+)

初始CSS關鍵詞的屬性的初始值適用於一個元件。它在每個CSS屬性上都是允許的,並使得它指定的元素使用該屬性的初始值。

其中初始值指:

在每個CSS屬性的定義的簡要給出的初始值具有用於繼承和非繼承的屬性不同的含義。

  • 對於繼承的屬性,僅當根元素沒有爲元素指定值時,才使用初始值。
  • 對於非繼承屬性,對於任何元素,當元素沒有指定值時,使用初始值。

鏈接和引用來源:MDN

相關填充工具:https://stackoverflow.com/a/15903168/137626振作起來

相關問題