CSS - Создание подклассов

Question

У меня есть стиль по умолчанию для моих полей ввода. Я хотел бы добавить дополнительный стиль в поле, когда я указываю класс "req". Это не работает. Вот мой код.

CSS:

input{background-color: #000; color: #FFF; border: 1px solid #515151; width: 230px;}
input req {background-color: Purple;}

HTML:

<input id="FirstName" type="text" class="req" />

Текстовое поле отражает входной класс, но не подкласс. Есть идеи?

Answer 1

В вашей таблице стилей CSS измените:

input req { ... }

до:

input.req { ... }

(input.req обозначает все input элементы, принадлежащие классу req, тогда как input req обозначает все req элементы, которые находятся внутри элемента input. Имя класса с префиксом точка просто сокращение для селектора атрибута [class~=req] .)

Answer 2

Вам не хватает точки в имени класса, попробуйте это:

input.req {background-color: Purple;}

Или просто добавьте этот стиль, потому что вы уже используете это для своего текстового поля:

.req {background-color: Purple;}

Answer 3

Оказывается, мне нужна точка между моим базовым входным классом и моим подклассом.

input.req {background-color: Purple;}