Error de principiantes en el selector de descendientes
Observe el siguiente selector:
p.eee {
color: red;
}
Ya debe saber que dicho selector elegirá
párrafos con la clase eee. Por ejemplo, estos:
<p class="eee">
lorem ipsum
</p>
<p class="eee">
lorem ipsum
</p>
Ahora observe este selector:
p .eee {
color: green;
}
Este selector se diferencia del anterior en que
tiene un espacio entre el nombre de la etiqueta y el nombre de la clase.
Este espacio representa el
selector de descendientes. Es decir, en este caso
elegimos todos los elementos con la clase eee,
que se encuentran dentro de los párrafos. Por ejemplo, este
selector elegirá los siguientes spans:
<p>
lorem <span class="eee">ipsum</span>
</p>
<p>
lorem <span class="eee">ipsum</span>
</p>
Resultado de la ejecución del código:
Entonces, una vez más: p.eee - tal selector elige párrafos con la clase
eee. Pero si lo hago así: p .eee, entonces elijo
todos los elementos con la clase eee, ubicados dentro de los párrafos.
Sientan esta diferencia.
Explique qué selecciona el selector en el código proporcionado a continuación. Luego escriba el código HTML que se ajuste a este selector. Aquí está el código con el selector:
p.bbb {
color: red;
}
Explique qué selecciona el selector en el código proporcionado a continuación. Luego escriba el código HTML que se ajuste a este selector. Aquí está el código con el selector:
p .bbb {
color: red;
}
Explique qué selecciona el selector en el código proporcionado a continuación. Luego escriba el código HTML que se ajuste a este selector. Aquí está el código con el selector:
.eee p.bbb {
color: red;
}
Explique qué selecciona el selector en el código proporcionado a continuación. Luego escriba el código HTML que se ajuste a este selector. Aquí está el código con el selector:
.eee p .bbb {
color: red;
}