CSS Guia css

                  /**** Especificidad ***/
1000 - En línea, es el que se le aplica directamente al elemento en HTML mediante style.
 100 - Selección po ID.
  10 - Selección por Clas, por Atributo y por pseudoelemento.
   1 - Selección por elemento "H - span - Header - p"
   
/**** Herencia ****/
 !important - Se salta todas las especificidades pero sigue teniendo en cuenta la especificidad.
 
 Ejemplo:
 h2.coloreado{ /**+ Especificidad = 11 **/
    color : red !important;  
 }
 .coloreado{ /*** Especificidad = 10 **/
     color: green;
 }
 
 /*** Herencia ***/
 
 Con inherit los elementos heredan propiedades de sus padres o contenedores,
 Con initia se resetea la herencia.
 
 /******** Selectores ********/

/** Por Atributo ***/
[class]{
    /* Selecciona a todos los elementos que tengan una clase*/
    font-size: 6px;
}
/* Esto seleccionará todos los elementos cuyo atributo class comienza con "mi-clase" */
[class^="mi-clase"] {
  /* Estilos para estos elementos */
  background-color: yellow;
}

/* Esto seleccionará todos los elementos cuyo atributo class contiene "mi-clase" en cualquier lugar */
[class*="mi-clase"] {
  /* Estilos para estos elementos */
  background-color: yellow;
}
[nombreAtributo]{
    /*Cualquier nombre puede darse como atributo */
    color: blue;
}

[href="https://una-web.com"]{
    /*Elementos con atributo href que lleven a esa dirección */
    color: darkgreen;
}

[href^="loque-sea"]{
    /*Elementos con atributo href y que empiezen con loque-sea, 
    independientemente de lo que venga después.
    Viene siendo [href^="loque-sea.....]*/
    
}
[href$='loque-sea']{
    /* Elementos cuyo valor del atributo href finalice con 'loque-sea', 
    independientemente de lo que antes tenga.*/
}

[href*='loque-sea']{
    /*Elementos cuyo valor del atributo href contenga 'loque-sea' 
    independientemente de lo que tenga antes o después de esa plabra*/
}

.contenedor p {
    /* Selecciona a todos los elementos p que se encuentren dentro un contenedor,
    sin importar la descendencia*/
}

.contenedor>p {
    /* Selecciona a todos los elementos p que sean hijos directos */
}


nav.contenedor{
    /*Selecciona a los elementos nav que tengan la clase contenedor*/
}

h+p2{
    /*Selecciona al hermano adyacente y solo al adyacente*/
}
h2~p{
    /*Selecciona a todos los hermanos, a todos*/
}