css: trọng đầu vào [type = "text"]

Question

CSS trông giống như:

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

.small 
{ 
    width: 50px; 
} 

Tôi có một số lĩnh vực văn bản mà tôi muốn nhỏ hơn. Tôi đã thử một vài điều khác nhau, nhưng không thể tìm ra cách để có được chỉ định một lĩnh vực đầu vào với, nói, chiều rộng 50.

Textbox được render với:

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

Kích thuộc tính được bỏ qua, và .small không ghi đè đầu vào.

Answer 1

Viết thêm specific selector.

ví dụ:

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

Answer 2

Bạn chưa cung cấp nhiều thông tin, nhưng tôi đoán là bạn đang có css specificity issues. Thử đặt quy tắc css cho các mục sau:

input[type="text"].myClassWithSmallerWidth 

Answer 3

Vấn đề là các lớp giả được tính là một lớp. Vì vậy, [type = text] (một lớp giả) có độ đặc hiệu bằng nhau .small, và sau đó chiều rộng: 200px thắng vì sự bổ sung của đầu vào.

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

Bạn có lẽ sẽ cần

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

(Theo http://www.w3.org/TR/CSS21/cascade.html#specificity)