Me encontré con el siguiente problema.
Tengo dos secciones HTML. Dentro de la primera sección, tengo un elemento <p> definido. Dicho elemento <p> viene después de un <div> con una clase llamada "cuadro de texto". He seleccionado este elemento <p> dentro de mi hoja de estilo llamando de la siguiente manera.
.text-box p { margin: 10px 0 40px; font-size: 14px; color: #fff; } Luego hay una segunda sección y en ella hay un segundo elemento <p> . Seleccioné este elemento <p> de la siguiente manera y apliqué un estilo relevante dentro de mi hoja de estilo.
p { color: #fff; font-size: 49px; font-weight: 300; line-height: 22px; padding: 10px; background: red; } Mi pregunta es, de todas las reglas CSS que he definido para el segundo elemento <p> , el fondo: rojo; la regla también se aplica al primer elemento <p> . No puedo entender por qué sucede, ya que ninguna de las otras reglas que he aplicado afectan al primer elemento <p> sino a la propiedad de fondo. Estoy seguro de que esto es algo muy sencillo que me estoy perdiendo aquí. ¿Puede alguien ayudarme por favor?
Para una mejor comprensión, el contenido HTML y CSS se encuentra en el siguiente codepen.
Todos los estilos especificados para p se aplicarán a todos los elementos p , excepto cuando se anulen por especificaciones para .text-box p que es un selector más específico. Para .text-box p , reemplazó la especificación de font-size de p pero no tiene un background especificado, por lo que usa el que especificó para el p más general.
Si no desea un fondo para .text-box p , puede desactivarlo con background: unset; .
Hacer esto con p superpondrá todas las etiquetas con p . Pero, por ejemplo, cuando haces .mydiv p , tratará la p dentro de tu div y le dará un fondo.
HTML
<div class="mydiv"> <p>Hello</p> </div>o
<p class="mytitle">Hi</p>CSS
.mydiv p{ padding: 40px; background-color: red; }o
.mytitle{ padding: 40px; background-color: red; }Actualice su estilo de etiqueta de párrafo de la segunda sección seleccionando el course del nombre de la clase principal para eliminar cualquier otro párrafo fuera de esta sección para que no tome sus propiedades de la siguiente manera
.course p { color: #fff; font-size: 49px; font-weight: 300; line-height: 22px; padding: 10px; background: red; }