0

我有一个我想设置样式的 html 页面（使用 IE9）。

以下代码：

<style type="text/css">
    #komponenter select,
    #komponenter input
    {
         width: 180px;
         box-sizing:content-box; 
    }

    .special_box { width: 50px; height: 150px; }
</style>

... snipp ...

<div id="col2" class="kolumn">

    @Html.LabelFor(model => Model.Verksamhetskod)
    <br />
    @Html.TextBoxFor(model => Model.Verksamhetskod)
    <br />

    @Html.Label("Lat/Long")
    @Html.TextBoxFor(m => m.LatitudTecken)
    @Html.TextBoxFor(m => m.Latitud)
    @Html.TextBoxFor(m => m.LongitudTecken)
    @Html.TextBoxFor(m => m.Longitud)
    <br />

    @Html.Label("3 Överväganden:")
    <br />
    @Html.TextBoxFor(m => m.Overvagande)
    <br />

    @Html.Label("1 Ingångsvärden:")
    <br />
    @Html.TextBoxFor(m => m.Ingangsvarde, new { @class = "special_box" })
    <br />
</div>

html 渲染得很好，问题是 .special_box 宽度被上面的 css 语句覆盖（高度工作正常）。我尝试将类放在样式部分的首位，但没有任何区别。

4

2 回答 2

1

这是一个具体问题：试试这个（假设.special_box是一个input元素）

#komponenter select,
#komponenter input
{
     width: 180px;
     box-sizing:content-box; 
}

#komponenter input.special_box {
     width: 50px; height: 150px; 
}

像这样的规则#komponenter input具有101（1个id，0个类，1个元素）的特异性，
而.special_box具有10（1个类，0个元素）的特异性

有关更多信息，请参阅http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-04-23T10:32:18.133 回答
0

上面的 CSS比您的(0-1-0)具有更高的特异性.specialbox( 1-0-1)。要提出它，您必须“更具体”：

/*here we add a few more selectors to .special_box to be more specific*/
#komponenter input.special_box (1-1-1)
//   1-0-0 for #komponenter
//   0-0-1 for input
// + 0-1-0 for .special_box
// = 1-1-1

或者只是覆盖您想要生效的样式!important

#komponenter input.special_box{
    width: 50px !important;   /*override width*/
    height: 150px;
}
于 2012-04-23T10:34:25.983 回答