Как я могу специально настроить этот элемент с помощью CSS?

Question

<div id=checkout>
<form id="confirmation" class="center">
<p>content</p>
</form>
</div>

У меня есть CSS-селектор #checkout form.center, который уже используется

Я хотел бы переопределить это специально для формы подтверждения, но ни одна из вещей, которые я пытаюсь написать, не применяется. Я должен думать, что #confirmation form.center или что-то должно заменить первое правило, но оно даже не поражает цель. #confirmation переопределяется вышеупомянутым селектором, потому что это не так специфично.

Answer 1

Расширение ответа BoltClock:

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

По этой причине добавление чего-либо, соответствующего существующему селектору (#checkout form.center), позволит вам переопределить его:

#checkout form.center {
  /* your existing CSS */
}

#checkout #confirmation {
  /* your overrides; this has higher specificity */
}

#checkout form#confirmation {
  /* this would also work -- even higher specificity */
}

#checkout form#confirmation.center {
  /* even higher */
}

#checkout form.center p {
  /* works inside the p only, but also has
     greater specificity than #checkout form.center  */
}

Answer 2

Если вам нужно переопределить существующий селектор, используйте:

#checkout #confirmation

Причина, по которой #confirmation form.center не работает, заключается в том, что он выбирает form.center, который расположен в элементе #confirmation, что не то же самое. Вы бы написали это так:

#checkout form#confirmation.center

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