CSS presedence селектора над классом

Question

.formWrap input[type="text"] { 
    font-size: 12px;  
} 

.bigger { 
    font-size: 14px 
} 

<div class="formWrap"> 
    <input type="text" class="bigger" /> 
</div> 

Почему вышесказанное не делает текст поля ввода 14px?

Когда я использую селектор input[type="text"], как я могу настроить таргетинг на определенный класс, который является дочерним элементом formWrap?

Есть ли лучший способ дать всем моим входам конкретный стиль, а затем внести коррективы в определенные входы (надеюсь, на основе класса)?

Answer 1

Первый селектор имеет более высокую специфичность, чем класс .bigger.

Для повышения специфичности класса .bigger, вы можете сделать это:

.formWrap input[type="text"]{ 
     font-size: 12px; 
} 

.formWrap input[type="text"].bigger{ 
     font-size: 14px 
} 

ИЛИ (не очень рекомендуется):

.bigger{ 
font-size: 14px !important; 
} 

Answer 2

Ответ Specificity.

Ваш первый селектор имеет более высокий специфика, чем ваш второй селектор, поэтому его свойства имеют приоритет.

.formWrap input[type="text"] содержит класс, в элемент и атрибут селектора. В соответствии с спецификацией селекторов CSS (см. Выше) этот селектор имеет спецификацию 21. .bigger, с другой стороны, имеет только селектор класса и поэтому имеет только специфичность 10. 21 больше 10.

от MDN:

специфичности является средством, с помощью которого браузер решает, какие значения свойств являются наиболее релевантными для элемента и получает применяться. Специфика основана только на правилах сопоставления, состоящих из селекторов разного рода.

В вашем случае, простой способ получить второй селектор, чтобы иметь приоритет над первым является увеличением этого селектора, чтобы иметь равную или более высокую специфичность:

input.bigger {} /* 11 */ 

Вы даже можете повторить тот же селектор несколько раз (как и было отмечено в спецификации):

input.bigger.bigger {}    /* 21 */ 

Обратите внимание, что если специфика обоих селекторов равны, селектор включены позже в таблице стилей будет т он один приоритет.

Answer 3

Существует хорошая статья о специфике и как вычислите здесь. Что-то, что требуется, когда вы начинаете писать CSS.

Расчет CSS Специфичность Значение http://css-tricks.com/specifics-on-css-specificity/