我有一个包含两个部分的响应式页面。右侧部分的所有元素都应该是响应式的,所以我使用了:
#rightSection * {max-width:100%;height:auto}
但是,正如您在代码片段中看到的那样,任何其他高度样式都将被忽略。
我不想使用 !important
因为我有很多带有 html 代码的内联样式,所以我不想通过 CSS 强制样式。在 height:auto
之后还有其他设置高度的方法吗?
#rightSection * {max-width:100%;height:auto}
.mydiv {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
最佳答案
根据您的代码,无论发生什么都很好 CSS
表示 Cascading Style sheet
这意味着最后一条规则适用,并且适用于更具体的规则。因此,在您的情况下,第一条规则比第二条规则具有更高的特异性,因此正在应用 height:auto
。
有关 Specificity 的更多详细信息,请参阅链接.
因此,在您的代码中,您可以通过不同的方式使第二个 Angular 色更加具体,您将从上面的链接中了解这些方式。下面是一个这样的例子。
#rightSection * {max-width:100%;height:auto}
#rightSection div {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
编辑:
正如@connexo 所指出的,我建议不要使用 Id
选择器 refer this有关原因的更多详细信息。
您可以改用 css 类,因为类有助于使您的代码更通用,例如
.outerDiv * {max-width:100%;height:auto}
.outerDiv .mydiv{
width:534px;
height:37px;
box-sizing:border-box;
}
<div class="outerDiv">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is visible now as the rule is more specific.
希望对您有所帮助:)
关于html - 高度 :auto overrides all height styles,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41681507/