覆蓋某些元素的CSS選擇器

Question

我有一個要設置樣式的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語句覆蓋（高度可以正常工作）。 我嘗試將類放在樣式部分的第一位，但沒有任何區別。

Answer 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/

Answer 2

上面的CSS有較高的特異性比你（1-0-1） .specialbox （0-1-0）。 要提高它，您必須“更加具體”：

/*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;
}