Jerarquía CSS: Herencia, Cascada y Especificidad

/* Selector de etiqueta: aplica estilos al contenedor principal <main> */
.layout {
  /* El color se heredará a los elementos hijos */
  color: #333;
  /* La fuente también se hereda */
  font-family: Arial, sans-serif;
}

/* Selector de clase: apunta al <p class="text"> del HTML anterior */
.text {
  /* No redefinimos color: se hereda desde .layout */
  font-size: 16px;
}

<!-- <div class="card"> es el contenedor padre del componente -->
<div class="card">
  <!-- <h2> es hijo directo de .card -->
  <h2>Título de la tarjeta</h2>
  <!-- <span> es descendiente, no hijo directo -->
  <p><span>Texto secundario</span></p>
</div>

/* Selector descendente: apunta a todos los <span> dentro de .card */
.card span {
  /* Cambia el color del texto secundario */
  color: gray;
  /* Se aplica incluso si el span no es hijo directo */
}

<!-- <nav> es el contenedor del menú -->
<nav class="menu">
  <!-- Este <span> es hijo directo -->
  <span>Inicio</span>
  <!-- Este <div> crea un nivel intermedio -->
  <div>
    <span>Contacto</span>
  </div>
</nav>

<!-- Clase aplicada directamente al elemento a estilizar -->
<p class="highlight">Texto importante</p>

/* Selector de etiqueta: baja especificidad */
p {
  color: red;
}

/* Selector de clase: mayor especificidad */
.highlight {
  /* Este color sobrescribe al anterior */
  color: blue;
}

<!-- Estructura simple y semántica -->
<section class="content">
  <h1>Título principal</h1>
  <p>Contenido del artículo</p>
</section>

<!-- Párrafo con una sola clase -->
<p class="btn">Botón de acción</p>

<!-- Estilo aplicado directamente en el HTML -->
<p style="color: red">Párrafo con estilo inline</p>

/* Regla externa que intenta cambiar el color */
p {
  color: blue;
}

/* Esta regla NO ganará frente a un style="color: red" */

<!-- El mismo elemento tiene etiqueta, clase, ID y estilo inline -->
<p
  id="main-text"
  class="highlight"
  style="color: purple">
  Texto con múltiples niveles de estilo
</p>

/* 4️⃣ Etiqueta → MENOR prioridad */
p {
  color: black;
}

/* 3️⃣ Clase */
.highlight {
  color: blue;
}

/* 2️⃣ ID */
#main-text {
  color: red;
}

/* 1️⃣ Inline → MAYOR prioridad (definido en el HTML) */
/* style="color: purple" → este gana */

<!-- Elemento afectado por múltiples reglas -->
<h1 class="title" id="main-title">Título principal</h1>

/* Regla con !important */
.title {
  color: red !important;
}

/* Incluso un ID pierde contra !important */
#main-title {
  color: blue;
}