añadiendo clase CSS a múltiples elementos

Question

he creado una clase CSS llamada 'botón' y lo aplicó a todos mis etiquetas INPUT por el simple uso:

.button input 
{ 
//css stuff here 
} 

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

la que trabaja muy bien, pero luego he añadido otro botón, pero esto no forma parte de mi forma, es solo un marcador de posición que se combina con javascript y abre un iFrame. Como quería que se viera igual que todos los botones "reales", utilicé la misma clase.

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

El problema que tuve fue que si dejaba la clase como .button input la etiqueta <a> no lo vio. Si eliminé la parte input del CSS, todos mis botones obtuvieron cuadrados grises en el centro.

Así que resolvieron con .button input,a

Esto funcionó bien. . . Hasta que miré en otra página y encontré todas mis etiquetas <a> formateadas ahora con la clase 'botón', aunque no tienen esta clase aplicada.

Mi pregunta entonces es ¿cómo puedo aplicar la misma clase CSS a <input> y <a> etiquetas al mismo tiempo, pero sólo si he añadido explícitamente class="button".

Answer 1

que necesita para calificar la parte a del selector también:

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

Básicamente, cuando se utiliza la coma para crear una group of selectors, cada selector individual es completamente independiente. No hay relación entre ellos.

Por ello, el selector de originales coincida con "todos los elementos del tipo 'entrada' que son descendientes de un elemento con el nombre de clase 'botón', y todos los elementos del tipo 'a'".

Answer 2

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

Answer 3

Intente utilizar:

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

También, leer sobre CSS.

Editar: Si fuera yo, me gustaría añadir la clase de botón con el elemento, no a la etiqueta principal. Al igual que :

HTML:

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

CSS:

.button { 
    // css stuff 
} 

Para uso específico css cosas:

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

Answer 4

probar esto:

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

que se aplicará el estilo a todas las etiquetas anidadas dentro de una de <p class="button"></p>