Центральное текстовое поле дизайна материала

Question

У меня есть следующий html код:

<div class="mdc-text-field steps_div" id="textfeild">       
  <input type="number" class="mdc-text-field__input" id="steps" name="name">
  <label class="mdc-floating-label" for="steps">Steps</label>
  <div class="mdc-line-ripple"></div>
</div>

Этот CSS центрирует текстовое поле:

div#textfeild {
  display: block;
  margin: 0 auto;
  width: 250px;
}

Но это не так:

.steps_div {
  display: block;
  width: 250px;
  margin: 0 auto;
}

Почему первый работает, а второй нет?

Answer 1

Использование id в CSS имеет более высокий приоритет, чем class . В вашем случае div # textfeild имеет больший вес до css, чем .steps_div .

Даже если вы используете .steps_div после div # textfeild - первым будет лидер, благодаря весу и уникальному качеству id .