CSS: 覆盖 input[type="text"]

Question

CSS 的样子如下：

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

.small 
{
  width: 50px;
}

我有一些文本字段，希望它们更小。我尝试了几种不同的方法，但无法弄清如何指定一个宽度为50的输入字段。

文本框使用以下代码呈现：

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

size 属性被忽略了，并且 .small 不能覆盖 input。

- chris

Answer 1

编写一个更加具体的选择器。

例如：

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

- Quentin

Answer 2

问题在于伪类被视为一个类。因此[type=text]（伪类）与.small具有相同的特异性，然后由于输入的添加，width: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)

- thugsb

---

谢谢您解释为什么它被覆盖了！我遇到了完全相同的问题，立刻知道这与特定性有关，但无法弄清楚原因，您让它变得清晰易懂。 - Chris

Answer 3

你没有提供太多信息，但我猜测你遇到了 CSS 特异性问题。尝试为以下内容设置 CSS 规则：

input[type="text"].myClassWithSmallerWidth

- Stefan Kendall