0

（IE9を使用して）スタイルを設定したいhtmlページがあります。

次のコード：

<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 に答える