CSS：繼承是不是在子類

我有一個CSS類「MyParent」正在由多個子類繼承工作作爲exected。我想要「MyParent」類的一些屬性，應該由子類重寫，因爲它們需要重寫，並且這個重寫不應該影響其他子類。請找到下面的例子。CSS：繼承是不是在子類

.MyParent { 
    border-style: solid; 
    border-color: red; 
    background-color: yellow; 
    color: red; 
} 
.MyChild1 .MyParent{ 
    background-color: blue !important; 
    color: white !important; 
} 

.MyChild2 .MyParent{ 
    background-color: yellow !important; 
    color: black !important; 
}

而我的Html如下所示。

<div class="MyParent"> 
this is parent div 
</div> 

<div class="MyChild1"> 
this is child1 
</div> 

<div class="MyChild2"> 
this is child2 
</div>

我期待與黃背對地表的顏色與字體顏色顯示的MyParent DIV是紅色的，這是工作的罰款，但如預期，雖然我替換的屬性，其餘的div不工作。我所做的是，請找到下面的代碼。

.MyChild1, .MyParent{ 
    background-color: blue !important; 
    color: white !important; 
} 

.MyChild2, .MyParent{ 
    background-color: green !important; 
    color: white !important; 
}

現在，它的部分工作，但屬性格式我們在課堂上「MyChild2」是影響父類的屬性來覆蓋。正因爲如此，具有類「MyParent」的div因爲這種繼承而沒有按預期得到渲染。由於這種情況，在應用程序的大部分位置中，輸出受到干擾。在情況下，如果我想這如預期，我可以寫一個多子類中工作，我們可以做到這一點，還寫子類每一次很討厭也有的像BORDERCOLOR屬性是沒有得到繼承。但爲什麼在CSS中這種行爲，我們如何糾正它。有人可以解釋我嗎？

在此先感謝，薩蘭。如果它們的值被設置爲inherit

來源

2015-10-25 saran kumar

CSS屬性是從父元素繼承。

許多屬性（如color）的默認值爲inherit，因此它們將繼承而不進行任何其他操作。

大多數佈局屬性（包括邊框）具有不同的默認值（通常爲0），因此它們不會從父元素繼承，除非您手動將它們設置爲inherit。畢竟，如果你添加邊框的元素，你不希望每一個元素的它裏面得到一個類似的邊界...

要查看任何給定的屬性的默認值，檢查MDN。

來源

2015-10-25 15:51:41 SLaks

你是對的@SLaks :)你從我這裏應該有一個+1！ –

這不完全正確。有些屬性是繼承的，有些則不是。繼承的初始值不是'inherit'，但是當級聯不會產生一個值時它們會繼承。繼承和非繼承都可以強制繼承'inherit'。見http://www.w3.org/TR/css-cascade-4/#inheriting – Oriol

在CSS中，您不能讓規則集繼承其他樣式。

Inheritance只能發生從父母給孩子：

繼承從父元素子女傳播屬性值。一個元件上的屬性的繼承值是元素的父元件上的屬性的computed value。

相反，我覺得你在cascading有興趣：

的級聯需要的declared values一個無序列表的定屬性的特定元素上，由他們申報的優先爲它們排序如下所述，並輸出單個cascaded value。

.MyParent, .MyChild1, .MyChild2 { 
 
    border-style: solid; 
 
    border-color: red; 
 
    background-color: yellow; 
 
    color: red; 
 
} 
 
.MyChild1 { 
 
    background-color: blue; 
 
    color: white; 
 
} 
 
.MyChild2 { 
 
    background-color: yellow; 
 
    color: black; 
 
}

<div class="MyParent"> 
 
this is parent div 
 
</div> 
 
<div class="MyChild1"> 
 
this is child1 
 
</div> 
 
<div class="MyChild2"> 
 
this is child2 
 
</div>

來源

2015-10-25 16:11:34 Oriol

CSS：繼承是不是在子類

回答

相關問題