Combinación y anidamiento del tutorial intermedio de CSS

combinación

No es necesario repetir varios selectores con los mismos atributos, solo necesita separar los selectores con comas (,).
Por ejemplo, tienes el siguiente código:

h2 { color: rojo; } .estaOtraClase { color: rojo; } .todavíaOtraClase { color: rojo; }

Entonces puedes escribir:

h2, .estaOtraClase, .todavíaOtraClase { color: rojo; }

anidado

Si CSS está bien estructurado, no es necesario utilizar demasiadas clases o selectores de identificadores. Esto se debe a que puede especificar selectores dentro de selectores. (O mejor dicho, selector de contexto - por traductor)
Por ejemplo:

#arriba { color de fondo: #ccc; relleno: 1em } #arriba h1 { color: #ff0; } #arriba p { color: rojo; peso de fuente: negrita; }

Esto elimina selectores de clases o identificadores innecesarios si se aplica a HTML de esta manera:

<div id="arriba"> <h1>Curry de chocolate</h1> <p>Esta es mi receta para hacer curry únicamente con chocolate</p> <p>Mmmm mmmmmm</p> </div>

Esto se debe a que, utilizando selectores ingleses separados por espacios de medio ancho, especificamos que h1 en el ID ID tiene el color "#ff0", mientras que p es rojo y negrita.
Esto también puede ser un poco complicado (ya que puede haber más de dos niveles, como dentro dentro dentro dentro dentro dentro, etc.). Necesitas practicar más.