Правила приоритета CSS не применяются должным образом на ширине поля ввода

Question

У меня проблема с приоритетом CSS в поле ввода. Ширина 96% применяется, тогда как в соответствии с правилами приоритета должна применяться ширина auto. Если я применяю !important, применяется стиль, который я хочу применить. Однако это не то, как я хотел бы решить проблему.

У меня есть поле ввода реализовано таким образом

<fieldset> 
    <label>Search</label> 
    <input type="text" class="standard-size"> <!-- Referring to this --> 
</fieldset> 

И влияние этих 2 CSS декларации:

fieldset input[type=text] { 
     width: 96%; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     border: 1px solid #BBBBBB; 
     height: 20px; 
     color: #666666; 
     -webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; 
     -moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; 
     box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; 
     padding-left: 10px; 
     background-position: 10px 6px; 
     margin: 0; 
     display: block; 
     float: left; 
     margin: 0 10px; 
} 

.standard-size { 
    width: auto ; 
} 

Согласно этой ссылке: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

очередности работ таким образом (Inline Style, ID, Class, Element) , Число слева предшествует любому числу справа.

В моем случае: FIELDSET ввода [тип = текст] переводит (0,0,0,2), потому что FIELDSET и вход 2 элемента И .Стандартный размера переводится (0,0,1, 0), потому что .стандартный размер один класс CSS

(0,0,1,0) должен иметь приоритет над (0,0,0,2), поскольку 1 просто больше слева, чем 2 и что делает его более важным. Итак, почему ширина 96% занимает?

Спасибо

Answer 1

Вы забыли посчитать селектор [type=text] атрибута, который эквивалентен селектор класса (также упоминается в статье вы связаны с):

fieldset input[type=text] /* 1 attribute, 2 types -> specificity = (0, 0, 1, 2) */ 
.standard-size   /* 1 class    -> specificity = (0, 0, 1, 0) */ 

В то время как селектор атрибута и селектор классов эквивалентен, это два типа селекторов в вашем первом правиле, которые заставляют его перевешивать второе.

Answer 2

Потому что [type=text] является атрибутом, он добавляет (0,0,1,0) (source). Таким образом, ваш первый набор правил действительно имеет специфичность (0,0,1,2), которая больше (0,0,1,0).