Добавление класса css к нескольким элементам

Я создал класс CSS под названием 'button' и применил его ко всем моим тегам INPUT, просто используя:

.button input
{
//css stuff here
}

<p class="button">
<input type="submit" Name='submit' value="Confirm Selection"/>
</p>

который отлично работает, но я добавил еще одну кнопку, но это не часть моей формы, это просто владелец места, который тригрерован с javascript и открывает iFrame. Поскольку я хотел, чтобы он выглядел так же, как и все "реальные" кнопки, я использовал один и тот же класс.

<p class="button" id="AddCustomer">
<a href="AddCustomer.php">Add Customer</a>
</p>

Проблема была в том, что если я оставил класс как .button input, тэг <a> его не видел. Если я удалил часть input CSS, все мои кнопки получили серые квадраты посередине.

Итак, я разрешил его с помощью .button input,a

Все прошло отлично., Пока я не посмотрел на другую страницу и не обнаружил, что все мои теги <a> теперь отформатированы с помощью класса 'button', хотя они не имеют этого класса.

Мой вопрос в том, как я могу применить один и тот же класс CSS к тегам <input> и <a> одновременно, но только если я явно добавил class="button".

Ответ 1

Вам нужно также квалифицировать часть a селектора:

.button input, .button a {
    //css stuff here
}

В принципе, когда вы используете запятую для создания группы селекторов , каждый отдельный селектор полностью независим. Между ними нет никакой связи.

Таким образом, ваш исходный селектор соответствовал "всем элементам ввода типа", которые являются потомками элемента с именем класса 'button' и всеми элементами типа "a".

Ответ 2

Попробуйте использовать:

.button input, .button a {
    // css stuff
}

Также прочитайте в CSS.

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

HTML:

<a href="#" class='button'>BUTTON TEXT</a>
<input type="submit" class='button' value='buttontext' />

CSS

.button {
    // css stuff
}

Для конкретного использования css используйте:

input.button {
    // css stuff
}
a.button {
    // css stuff
}

Ответ 3

.button input,
.button a {
    ...
}

Ответ 4

попробуйте следующее:

.button input, .button a {
//css here
}

Это применит стиль ко всем тегам, вложенным внутри <p class="button"></p>