dodając klasę css do wielu elementów

Question

Stworzyłem klasę CSS o nazwie „przycisk” i zastosować je do wszystkich moich tagów wprowadzony przez prostu za pomocą:

.button input 
{ 
//css stuff here 
} 

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

który działa dobrze, ale potem dodaje inny przycisk, ale to nie jest część mojej formy, to tylko obiekt zastępczy, który jest śledzony przez javascript i otwiera element iframe. Ponieważ chciałem, aby wyglądał tak samo jak wszystkie "prawdziwe" przyciski, użyłem tej samej klasy.

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

Problem miałem było to, że gdybym opuścił klasę jako .button input tag <a> nie widzę. Jeśli usunąłem część CSS input, wszystkie moje guziki mają szare kwadraty na środku.

Więc postanowiłem go .button input,a

To działało w porządku. . . Dopóki nie spojrzałem na inną stronę i znalazłem wszystkie moje tagi <a> zostały teraz sformatowane za pomocą klasy "button", mimo że nie mają one zastosowania tej klasy.

Moje pytanie jest więc jak mogę zastosować tę samą klasę CSS <input> i <a> znaczników w tym samym czasie, ale tylko wtedy, gdy mam wyraźnie dodaje class="button".

Answer 1

trzeba zakwalifikować a część selektora też:

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

Zasadniczo, gdy używasz przecinka stworzyć group of selectors, każda jednostka selektor jest całkowicie niezależna. Nie ma między nimi związku.

Twój oryginalny selektor dopasował więc "wszystkie elementy typu" input ", które są potomkami elementu z nazwą klasy" button "i wszystkimi elementami typu" a "".

Answer 2

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

Answer 3

Spróbuj użyć:

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

również przeczytać na CSS.

Edycja: Jeśli byłbym ja, dodałbym klasę przycisku do elementu, a nie do znacznika nadrzędnego. tak:

HTML:

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

CSS:

.button { 
    // css stuff 
} 

Dla konkretnego zastosowania css treści:

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

Answer 4

spróbować tego:

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

To spowoduje zastosowanie stylu do wszystkich tagów zagnieżdżonych wewnątrz <p class="button"></p>