height：auto覆盖所有高度样式

Question

我有一个包含两个部分的响应式页面。右边部分中的所有元素都应该是响应式的，所以我使用了：

#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!

Answer 1

根据您的代码，发生的任何事情都很正常CSS表示Cascading Style sheet表示最后一条规则适用，而且适用于更具体的规则。因此，在您的情况下，第一个规则具有比第二个规则更高的特定性，因此正在应用height:auto。

有关Specificity的详细信息，请参阅链接。

因此，在您的代码中，您可以通过上述链接获知的不同方式使第二个角色具体化。以下是一个这样的例子。

 #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.

希望有所帮助：）

Answer 2

    #rightSection * {max-width:100%;height:auto}


    #rightSection .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!