css：覆盖输入[type="text"]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2111548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css: overriding input[type="text"]
提问by chris
CSS looks like:
CSS看起来像：
input[type="text"]
{
width: 200px;
}
.small
{
width: 50px;
}
I have some text fields that I'd like smaller. I've tried a few different things, but can't figure out how to get specify an input field with, say, width 50.
我有一些想要缩小的文本字段。我尝试了一些不同的东西，但无法弄清楚如何指定宽度为 50 的输入字段。
Textbox is rendered with:
文本框呈现为：
<%= Html.TextBox("Order","",new { @class="small", size = 5 } ) %>
Size attribute is ignored, and .small doesn't override the input.
Size 属性被忽略，并且 .small 不会覆盖输入。
回答by Quentin
回答by thugsb
The problem is that pseudo classes count as a class. So [type=text] (a pseudo-class) has equal specificity to .small, and then the width:200px wins over because of the addition of the input.
问题是伪类算作一个类。所以[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 */
You'll probably need
你可能需要
input[type=text].small, .small {width:50px;}
(As per http://www.w3.org/TR/CSS21/cascade.html#specificity)
回答by Stefan Kendall
You haven't given much information, but my guess is that you're having css specificity issues. Try setting a css rule for the following:
您没有提供太多信息，但我的猜测是您遇到了css 特异性问题。尝试为以下内容设置 css 规则：
input[type="text"].myClassWithSmallerWidth
