CSS: определение стилей для элементов ввода внутри div

Question

У меня есть div с именем "divContainer", внутри которого у меня есть несколько элементов ввода, таких как текстовые поля, переключатели и т. Д. Как я могу определить стиль для тогда в CSS?Я хочу упомянуть стили для элементов внутри этого purticular div.not для всей формы.

Пример: для текстовых полей мне нужна ширина 150px;Для радио кнопок мне нужна ширина 20 пикселей;

Answer 1

Вы можете определить правила стиля, которые применяются только к определенным элементам внутри div с идентификатором divContainer, например:

#divContainer input { ... }
#divContainer input[type="radio"] { ... }
#divContainer input[type="text"] { ... }
/* etc */

Answer 2

CSS 3

divContainer input[type="text"] {
    width:150px;
}

CSS2 добавляет класс «текст» к текстовым входам, а затем в ваш CSS

.divContainer.text{
    width:150px;
}

Answer 3

Когда вы говорите «позвонил», я предполагаю, что вы имеете в виду идентификационный тег.

Чтобы сделать его кросс-браузерным, я бы не советовал использовать CSS3 [], хотя это вариант. При этом присвойте каждому из ваших текстовых полей класс, например, "tb" и переключатель "rb".

Тогда:

#divContainer .tb { width: 150px }
#divContainer .rb { width: 20px }

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

.tb { width: 150px }
.rb { width: 20px }

Как упоминал @David, для доступа к чему-либо внутри самого подразделения:

#divContainer [element] { ... }

Где [элемент] - это любой элемент HTML, который вам нужен.

Answer 4

Вот так.

.divContainer input[type="text"] {
  width:150px;
}
.divContainer input[type="radio"] {
  width:20px;
}