Comprender ejemplos más complejos de selectores de descendientes

Question

Entiendo algo los selectores de descendientes, pero los ejemplos más complejos me están dando problemas. Por ejemplo:

#content .alternative p 

caso de esta norma se aplican a elementos p que son descendientes de los elementos E, donde E son:

• descendientes de elemento #conten ty
• también son miembros de la clase .alternative

O debería aplicarse la regla a p elementos que son:

• descendientes de elemento #content
• y también son miembros de la clase .alternative?

¿Qué le parece la siguiente regla?

#content .alternative .alternative1 p 

Answer 1

El derecho más componentes del selector es la parte que realmente recoge el elemento. Un espacio es un selector descendente. Si no hay espacio, todos los selectores se aplican a un elemento.

#content .alternative p 

elemento p contenido en un elemento de clase alternativo contenido en un elemento del contenido de identificación.

#content .alternative .alternative1 p 

elemento p contenido en un elemento de clase alternativo1 contenido en un elemento de clase alternativo contenido en un elemento del contenido de id.

#content p.alternative.alternative1 

elemento p de alternative1 clase y de alternativa de clase contenida en un elemento de identificación de contenido.

Answer 2

Sobre la primera pregunta: ¿se aplica a p elementos que son: descendientes de #content elemento y también descendientes de los elementos con class .alternative

El segundo es el mismo, sólo con un nivel extra de profundidad.

Comprobar this link para obtener más información sobre los selectores

Answer 3

Cada sección del especificador separada por un espacio se refiere a un nodo separado en el documento. Entonces es el primero.

Answer 4

La primera es la descripción correcta. Su segunda interpretación sería escrito en CSS:

#content p.alternative 

Desde el .alternative se une a la p en esa versión, que es un partido de clasificación en lugar de especificar un descendiente.Si en lugar de escribirlo como

#content p .alternative 

que significaría elementos de la clase .alternative que son descendientes de p elementos que son descendientes del elemento #content.