l'aggiunta di classe CSS a più elementi

Question

ho creato una classe CSS chiamato 'pulsante' e applicata a tutti i miei tag input semplicemente usando:

.button input 
{ 
//css stuff here 
} 

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

che funziona bene, ma ho poi aggiunto un altro tasto, ma questo non fa parte della mia forma, è solo un segnaposto che viene attivato con javascript e apre un iFrame. Come volevo che sembrasse lo stesso di tutti i pulsanti 'reali' che usavo nella stessa classe.

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

Il problema che avevo era che, se ho lasciato la classe come .button input il tag <a> non lo vide. Se ho rimosso la parte input del CSS tutti i miei pulsanti hanno quadrati grigi nel mezzo.

Così ho risolto con .button input,a

Questo ha funzionato bene. . . Fino a quando non ho guardato un'altra pagina e ho trovato tutti i miei tag <a> ora formattati con la classe 'button', anche se non hanno questa classe applicata.

La mia domanda allora è come posso applicare la stessa classe CSS per <input> e <a> tag allo stesso tempo, ma solo se ho aggiunto esplicitamente class="button".

Answer 1

è necessario qualificare la parte a del selettore troppo:

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

In sostanza, quando si utilizza la virgola per creare un group of selectors, ogni singolo selettore è completamente indipendente. Non c'è alcuna relazione tra loro.

Il selettore originale pertanto corrispondeva a "tutti gli elementi di tipo 'input' che sono i discendenti di un elemento con il nome di classe 'pulsante' e tutti gli elementi di tipo 'a'".

Answer 2

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

Answer 3

Prova con:

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

Inoltre, leggere su CSS.

Modifica: Se fosse io, aggiungerei la classe pulsante all'elemento, non al tag principale. Come così:

HTML:

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

CSS:

.button { 
    // css stuff 
} 

Per uso specifico roba css:

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

Answer 4

provare questo:

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

Applicherà lo stile a tutti i tag nidificati all'interno di <p class="button"></p>