Использование css шаблон в неконтролируемой среде

Question

Я думаю об использовании шаблонного CSS (kube или любой другой) для создания моих форм. Они отлично работают в примере html-файла, однако, если я хочу использовать его в неконтролируемой среде (то есть, что CSS включен вне моего контроля), это портит эти стили. Я хотел бы знать, возможно ли применять эти стили только к элементам в родительском контейнере (пример.custom-options)?

Answer 1

Если вы намерены использовать шаблон для нацеливания на формы внутри .custom-options Контейнер, один из вариантов может быть просто сделать селекторы более конкретными:

body.custom-form-page .custom-options input[type="text"],
body.custom-form-page .custom-options input[type="password"],
body.custom-form-page .custom-options input[type="email"],
body.custom-form-page .custom-options input[type="url"],
body.custom-form-page .custom-options input[type="phone"],
body.custom-form-page .custom-options input[type="tel"],
body.custom-form-page .custom-options input[type="number"],
body.custom-form-page .custom-options input[type="datetime"],
body.custom-form-page .custom-options input[type="date"],
body.custom-form-page .custom-options input[type="search"],
body.custom-form-page .custom-options input[type="datetime-local"],
body.custom-form-page .custom-options textarea,
body.custom-form-page .custom-options select[multiple="multiple"] {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
  font-size: 14px;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  border: 1px solid #bbbcc0;
  outline: none;
  padding: 7px 5px;
  position: relative;
  z-index: 2;
 -webkit-appearance: none;
}

Это не красиво, но... более конкретные селекторы будут иметь больший приоритет над собственными стилями WordPress.

Попробуй использовать !important только в крайнем случае, если вы не можете заставить селектор быть достаточно конкретным.