Comprender los selectores de CSS

¿Por qué es que lo siguiente hace que el texto sea rojo?

#stories li a {color:red} .default li.expand a {color:green} li.expand a {color:blue} 

 
  • this is the end
  • this is the end

Solo si pongo #stories en los otros, el texto cambiará. ¿Tiene un # más dominio a pesar de que está más arriba en el CSS?

Es una cuestión de “Especificidad de CSS”. El artículo de Andy Clarke CSS: Spcificity Wars hace un buen trabajo al explicarlo con un poco de humor. Aunque Eric Meyer agrega más claridad en su comentario .

De acuerdo con http://htmldog.com/guides/cssadvanced/specificity/ , ‘#’ (Un selector de ids) tiene la especificidad más alta, así que sí, cualquier elemento con un ‘#’ precederá a todo lo que no lo haga, si se refieren a lo mismo.

Verifique ese enlace para más información.

Lo esencial:

Siempre que use los mismos selectores, esto es cierto:

Los estilos en línea tienen prioridad 1 Los estilos definidos en la cabeza tienen prioridad 2 Los estilos en la hoja de estilos vinculada tienen prioridad 3

Pero también hay otras reglas de prioridad

Si solo usa hojas de estilo vinculadas o define estilos en la cabecera, esto es cierto:

Prioridad 1: identificaciones (porque solo puede haber una)
Prioridad 2: .clases (porque debe haber una .class agregada)
Prioridad 3: tags (prioridad más baja porque no se adjuntan ninguna clase o ID)

Cuanto más cerca esté la identificación del cuerpo, mayor será la prioridad.

 
#first-id .someclass {}

latidos

 .someclass {} 

tanto como

 #second-id .someclass {} 

PERO

Puedes hacer que .someclass venza las ID usando

 .someclass { color:#f00 !important;} 

Pero no estoy seguro de que el soporte del navegador sea importante.

Esa parece ser la forma en que funciona (a veces de manera frustrante), un selector de id es más específico que una clase.

Los selectores funcionan según la especificidad de una regla. Una identificación identifica de manera única un elemento específico, por lo que es lo más específico que puede obtener.

Toma este ejemplo:

  
  • this is the end
  • this is the end
  • this is the end
  • this is the end
  • this is the end
  • this is the end

¿Cómo apuntaría solo a la lista de #historias si los selectores no funcionaran de esa manera?