css:覆盖输入[type ="text"]

Question

CSS看起来像:

input[type="text"]
{
  width: 200px;
}

.small 
{
  width: 50px;
}

我有一些文字字段,我想要更小.我尝试了一些不同的东西,但无法弄清楚如何指定一个输入字段,例如宽度为50.

文本框呈现为:

  <%= Html.TextBox("Order","",new { @class="small", size = 5 } ) %>

大小属性被忽略,并且.small不会覆盖输入.

Answer 1

例如

input[type="text"].foo
{
  width: 50px;
}

Answer 2

问题是伪类算作一个类.因此,[type = text](伪类)与.small具有相同的特异性,然后宽度:200px因为添加了输入而获胜.

input[type=text]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
.small{}           /* a=0 b=0 c=1 d=0 -> specificity = 0,0,1,0 */

你可能需要

input[type=text].small, .small {width:50px;}