¿Cómo puedo aplicar estilos a varias clases a la vez?

Quiero dos clases con nombres diferentes que tienen la misma propiedad en CSS. No quiero repetir el código.

CSS:

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}

HTML:

<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

Ya que ambas clases están haciendo la misma cosa, yo debería ser capaz de combinar en una sola. ¿Cómo puedo hacer eso?

InformationsquelleAutor sat | 2010-01-20

4 Kommentare

  1. 465
    .abc, .xyz { margin-left: 20px; }

    es lo que usted está buscando.

    • +1, exactamente lo que estaba buscando. Usted puede también tener un segundo, entrada independiente para .abc y/o .xyz de las propiedades que no desea aplicar a ambos, por ejemplo .xyz {font-weight: bold;} se combinan para hacer .xyz de la negrita y la margen izquierda ed por 20px pero .abc sólo margin-left ed.
  2. 57

    Puede tener varias declaraciones CSS para las mismas propiedades separándolos con comas:

    .abc, .xyz {
       margin-left: 20px;
    }
    • aunque la respuesta seleccionada es completamente correcta, no podemos garantizar que los novatos van a entender lo que está haciendo. Me gustaría ir con el explicado más. Ya es más de «cómo pescar» en lugar de «aquí está el pescado».
  3. 15

    No Repetir Tu CSS

     a.abc, a.xyz{
        margin-left:20px;
     }

    O

     a{
        margin-left:20px;
     }
    • Creo que abc se entiende como un nombre de clase.. y xyz como otro. Su sugerencia es usar usar un mismo nombre de la clase de propiedades comunes que es innecesario y confuso, dado a la pregunta.
  4. 1

    Si se utiliza de la siguiente, el código puede ser más eficaz de lo que usted escribió.
    Usted debe agregar otra característica.

    .abc, .xyz {
    margin-left:20px;
    width: 100px;
    height: 100px;
    } 

    O

    a.abc, a.xyz {
    margin-left:20px;
    width: 100px;
    height: 100px;
    } 

    O

    a {
    margin-left:20px;
    width: 100px;
    height: 100px;
    } 

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea