добавление класса CSS для нескольких элементов

Question

я создал класс CSS под названием «кнопка» и применил его для всех моих тегов ввода, просто с помощью:

.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> теперь отформатированы с помощью класса «кнопка», хотя они не имеют этого класса. затем

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

Answer 1

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

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

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

Ваш оригинальный селектор поэтому соответствует «всем элементам ввода типа», которые являются потомками элемента с именем класса «кнопка» и всеми элементами типа «a».

Answer 2

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

Answer 3

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

.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 
} 

Answer 4

попробовать это:

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

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