Combinando todos ellos

Especificidad

Todos se pueden combinar como mejor nos venga en el proyecto y funcionarán, mejor o peor, dependiendo del resto de estilos que tengamos en el mismo, por lo que tenemos que saber cuál es la especificidad del selector, a más específico, gana en prioridad.

La especificidad es el orden de precedencia o la prioridad con la que se aplican los estilos CSS cuando existen varias reglas que hacen referencia a una o más propiedades de un mismo elemento con selectores diferentes.

1. Etiquetas: Las etiquetas o tipos de elemento son el selector menos prioritario. Tanto las clases como los identificadores o los estilos en línea tendrán más prioridad.
2. Clases y pseudo clases: Las clases y pseudo clases tienen más prioridad que las etiquetas por ser selectores más específicos, pero menos prioridad que los identificadores y los estilos en línea. Los selectores de atributo también se ponderan como si fuesen clases en lo referente a su prioridad.
3. Identificadores: Los identificadores id son el selector más específico de las hojas de estilo, ya que hacen referencia a un único elemento. Solo los estilos en línea tienen mayor prioridad.
4. Estilos en línea: Los estilos aplicados en el código HTML a cada elemento mediante el atributo style siempre tendrán prioridad sobre todos los demás, gozando de la mayor especificidad.
5. !important, que es de cobardes en 2022. Ya lo veremos.