Ejercicio CSS sobre especificidad y cascada en estilos

Descripción

Aplicar reglas de especificidad CSS para resolver conflictos de estilo

Crea un archivo CSS que aplique estilos a la siguiente estructura HTML:

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado

Asistente IA

Ejercicios

Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

<div class="container">
  <p id="special" class="text highlight">Este es un párrafo especial</p>
  <p class="text">Este es un párrafo normal</p>
</div>

Debes cumplir los siguientes requisitos:

Todos los párrafos deben tener un tamaño de fuente de 16px.
Los párrafos con clase "text" deben tener color azul (#0000FF).
El párrafo con id "special" debe tener color rojo (#FF0000).
Los elementos con clase "highlight" deben tener fondo amarillo (#FFFF00).
Los párrafos dentro de ".container" deben tener un padding de 10px.

Además, añade un comentario antes de cada regla CSS explicando su nivel de especificidad (en formato 0,0,0,0).

Solución al ejercicio

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el examen para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con exámenes de CSS

Mejora tus habilidades con cientos de exámenes de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Retroalimentación

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a practicar

Únete a miles de desarrolladores mejorando sus habilidades

⭐⭐⭐⭐⭐

4.9/5 valoración