asp.net - 控件样式被覆盖

Question

我有以下 ASP.Net 代码

...
<div style="width: 40%; float: left; margin-left: 15px">
    <b>County:</b>
    <asp:ComboBox ID="cboCounty" runat="server" MaxLength="0" 
    AutoCompleteMode="SuggestAppend" CssClass="EPSCombo">
    </asp:ComboBox>
    <br />
...

问题: 这个 div 包含许多组合框，它们没有按预期显示，它们都有 EPSCombo 类。当我调试 CSS 时，我发现它被覆盖了，这是 FireBug 的输出

我的EPSCombo样式如下(覆盖了默认的AjaxToolkit CSS)

.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
    margin: 0;
    border: solid 1px #7F9DB9;
    border-right: 0px none;
    padding: 1px 0px 0px 5px;
    font-size: 13px;
    height: 18px;
}
.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
    margin: 0;
    padding: 0;
    background-image: url(../images/windows-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 21px;
    width: 21px;
}
.EPSCombo .ajax__combobox_itemlist
{
    border-color: #7F9DB9;
}

而包含EPSCombo 的CSS 文件是最后一个包含在母版页中的文件。

问题:自从我进行 Web 开发以来可能已经有一段时间了，但是如果我决定控件的 CSS 类不应该具有最高优先级并且应该覆盖其他所有内容，对吗？如果是这样，那为什么我的组合框样式(高度、宽度、边距和填充)被覆盖了？我没有任何其他样式类可以为 Firebug 中显示的那些值设置高度和宽度。

更新 在 Loki 的回答后我想我应该添加这个，添加 !important 到这些属性会解决问题，但我想找到这个问题的根本原因看看哪里出了问题。

Answer 1

您的 ComboBox 可能会从 <div> 继承它的样式它包含在或来自比它更高的 div。由于您没有为包含它的 div 指定“类”或“ID”属性，如果您有类似的东西，该 div 可能正在从您的 CSS 文件中检索样式:

div
{
  height: 21px;
  margin: 0px;
  padding: 0px;
  width: 21px;
}

尽管您可以使用 asp style 来强制您的组合框采用独立样式像这样的属性:

<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0" 
AutoCompleteMode="SuggestAppend" style="margin: 0;padding: 0;height: 21px;width: 21px;">
</asp:ComboBox>

这应该比可能干扰您的应用程序的任何其他样式具有最高优先级。尽管被认为是不正确的编程实践，但它可能会帮助您缩小问题范围。

干杯，埃里克

编辑 我还应该提到，您的 CSS 代码是按照从最具体到最不具体的标签定义的顺序进行解释的。例如，div.menu比 div 更具体，这可能发生在您的样式表中的其他地方。

This也是一篇描述继承的好文章。希望这对您有所帮助!