Переопределение CSS с указанием имени, идентификатора и класса

Question

Я пытаюсь переопределить цвет фона в контроле формы, но, похоже, он не меняется. Вот что я делаю:

#guide .form-control
{
    background-color: #000000;
}

HTML:

input type="text" id="guide" name="q" class="form-control" placeholder="Search">

Спасибо!

Answer 1

Проблема с идентификатором #guide, а class .form-control находится на том же уровне. Следовательно, между ними не требуется места.

#guide.form-control{ ... }

Хотя, если нет необходимости, вы можете просто указать только класс или идентификатор.

#guide{ ... }

.form-control{ ... }

Answer 2

Достаточно только селектора класса.

Вы написали #guide .form-control, это означает элемент, класс которого .form-control , а также потомок элемента с идентификатором #guide. Это отличается от #guide.form-control (без пробела).

.form-control
{
    background-color: #000000;
}

<input type="text" id="guide" name="q" class="form-control" placeholder="Search">

Answer 3

Если вы хотите переопределить его, удалите пробел между двумя селекторами

#guide.form-control
{
     background-color: #000000;
}