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

再写一次specific selector。

e.g。

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

（根据http://www.w3.org/TR/CSS21/cascade.html#specificity）

Answer 3

你没有提供太多信息，但我的猜测是你有css specificity issues。尝试为以下内容设置css规则：

input[type="text"].myClassWithSmallerWidth