覆盖来自第三方库的css值

Question

我正在使用第三方css库进行造型，但我想为特定的div指定不同的min-height。
的div使用themeRow类都有一些属性和套：

min-height: 200px 

在我而言，这是太大了，我想设置一个不同的值，即

min-height: 75px 

所以我定义了一些内嵌css但是呈现在我的价值被排除和div在min-height: 200px

任何娃仍然吸引我可以告诉css使用我的价值而不是第三方价值？

<style> 
.bannerHeight { 
    min-height: 75px; 
} 
</style> 


<div class="themeRow bannerHeight"></div> 

Answer 1

您可以使用!important覆盖正在由第三方库分配给您的<div>的min-height: 200px值。尝试使用此CSS：

<style> 
.bannerHeight { 
    min-height: 75px !important; 
} 
</style> 

Answer 2

恕我直言，最好使用比!important更深的水平。如果这是你的页面上“主”然后

<style> 
.main .bannerHeight { 
    min-height: 75px; 
} 
</style> 

将覆盖

<style> 
.bannerHeight { 
    min-height: 75px; 
} 
</style> 

简单地与任何元素的双亲在这种情况下，更换.main到.bannerHeight，可能只是div .bannerHeight你暗示。 !important应该用于动态创建html css元素的尴尬情况，而不是像这种情况下的简单CSS覆盖。

但它的你的电话。

Answer 3

有一种内在的层次结构（因此“级联”）的样式表中，可以帮助你解决这个问题（更多在这里：http://www.w3.org/TR/CSS2/cascade.html这里：http://www.w3.org/TR/css-cascade-3/）

本质上讲，如果你想“覆盖”的规则，您可以：

• 地方所需的规则下在现有的样式表（作者张）
• 创建一个新的样式表，并把它下在页面上（第二作者张）
• 使用的重要标签（如上所述）（覆盖其它呼叫）
• 使用内嵌样式（不完全推荐，因为它结合了“形”与“功能”，这些应该是独立的实体）