爲DOM的一部分創建樣式重置的最佳方式是什麼？

我正在嘗試創建一個僅針對我的控件的css重置。因此，HTML會是這個樣子：爲DOM的一部分創建樣式重置的最佳方式是什麼？

<body> 
    <img class="outterImg" src="sadkitty.gif" /> 
    <div id="container" class="container"> 
    <img class="innerImg" src="sadkitty.gif" /> 
    <div class="subContainer"> 
     <img class="innerImg" src="sadkitty.gif" /> 
    </div> 
    </div> 
    <img class="outterImg" src="sadkitty.gif" /> 
</body>

的CSS是我遇到什麼麻煩，但我目前這個工作：

img 
{ 
    // Bad style declarations for the entire page 
    border: solid 3px red; 
    width: 50px; 
} 

.container img, .container div, .container etc. 
{ 
    // Style reset for specific elements within my control "container" 
    border: solid 3px blue; 
    width: 100px; 
} 

.innerImg img 
{ 
    // The target style for the specific class/element within the control 
    border: solid 3px green; 
    width: 200px; 
}

的問題是，」 .innerImg img「不會覆蓋」.container img「，正如我所期望的那樣。那麼，重置「容器」元素中所有元素的樣式，然後將樣式放置在該元素中的類上的最佳方法是什麼？

來源

2008-12-02 JoshNaro

選擇器 .innerImg img 指img元素內部與類innerImg的元素。文檔中沒有這樣的內容。

你可能想要的是img.innerImg。

除此之外，selector specificity有一個簡短的計算，它決定了遵循哪條規則。（該鏈接包含我在任何文檔中的新的最愛限定符：「在一個大型基地的數字系統中」）

來源

2008-12-02 17:33:27

我懷疑這個結果接近你想要的。

img 
{ 
    border: solid 3px red; 
    width: 50px; 
} 
.container .innerImg, .container div 
{ 
    border: solid 3px blue; 
    width: 100px; 
} 
.container .subContainer 
{ 
    border: none; 
} 
.subContainer .innerImg 
{ 
    border: solid 3px green; 
    width: 200px; 
}

來源

2008-12-02 17:28:50

爲DOM的一部分創建樣式重置的最佳方式是什麼？

回答

相關問題