En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo elemento HTML. El problema de estas reglas múltiples es que se pueden dar colisiones como la del siguiente ejemplo:

p { color: red; }
p { color: blue; }
 
<p>...</p>

¿De qué color se muestra el párrafo anterior? CSS tiene un mecanismo de resolución de colisiones muy complejo y que tiene en cuenta el tipo de hoja de estilo que se trate (de navegador, de usuario o de diseñador), la importancia de cada regla y lo específico que sea el selector.

El método seguido por CSS para resolver las colisiones de estilos se muestra a continuación:

  1. Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado.
  2. Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador) y su prioridad (palabra clave !important).
  3. Ordenar las declaraciones según lo específico que sea el selector. Cuanto más genérico es un selector, menos importancia tienen sus declaraciones.
  4. Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se aplica la que se indicó en último lugar.

Hasta que no se expliquen más adelante los conceptos de tipo de hoja de estilo y la prioridad, el mecanismo simplificado que se puede aplicar es el siguiente:

  1. Cuanto más específico sea un selector, más importancia tiene su regla asociada.
  2. A igual especificidad, se considera la última regla indicada.

Como en el ejemplo anterior los dos selectores son idénticos, las dos reglas tienen la misma prioridad y prevalece la que se indicó en último lugar, por lo que el párrafo se muestra de color azul.

En el siguiente ejemplo, la regla CSS que prevalece se decide por lo específico que es cada selector:

p { color: red; }
p#especial { color: green; }
* { color: blue; }
 
<p id="especial">...</p>

Al elemento <p> se le aplican las tres declaraciones. Como su origen y su importancia es la misma, decide la especificidad del selector. El selector * es el menos específico, ya que se refiere a “todos los elementos de la página”. El selector p es poco específico porque se refiere a “todos los párrafos de la página”. Por último, el selector p#especial sólo hace referencia a “el párrafo de la página cuyo atributo id sea igual a especial”. Como el selector p#especial es el más específico, su declaración es la que se tiene en cuenta y por tanto el párrafo se muestra de color verde.

Poner en marcha una oficina virtual Vamos a hacer una suposición. Estas viviendo en Madrid y te contrata una compañía que está en Nueva York para que te encargues de su sector de ventas ...
Que es un Backlink Backlinks vínculos externos de respaldo, son los enlaces que recibe una página web desde otras páginas web. El número de backlinks es la cantidad de p...
Descarga Firefox 4 final Apenas 10 días después del lanzamiento de Firefox 4 RC 1, el equipo de desarrollo de la Fundación Mozilla lanza una última versión candidata que prece...
¿Qué tienen en común las redes sociales y las hormigas? mira como lo explica un algoritmo… A primera vista, quizás se nos ocurriría decir que las redes sociales reúnen a muchas personas que se relacionan entre sí y que esto hace que se parez...
Tras el cierre de MegaUpload el intercambio de archivos digitales se muda a otros sitios Megaupload era uno de los mayores servicios de almacenamiento personal en línea. Por sí solo representaba entre el 30 y el 40 por ciento de todo el in...
#Office: Microsoft eliminó el Clip Art en Office Hoy es un día triste para aquellos que usaron Word y PowerPoint en sus tiempos de preparatoria o universidad: el Clip Art en Office ha dejado de exist...
Como decirle a Google por qué tu página web debería estar en mejor posición A través de la plataforma de comunicación Twitter, conocemos que ya es posible decirle directamente al equipo responsable del algoritmo del mayor busc...
23 de enero: el apagón protesta de Google, Twitter, Facebook, PayPal Será como volver al pasado, pero habiendo conocido el futuro. Surgirá una duda y se intentará buscar en Google, pero no funcionará. Se irá a Twitter p...
Facebook prohibe Google AdSense La disputa que Google y Facebook están llevando a cabo ha dado un nuevo paso con la prohibición de AdSense como proveedor de anuncios aceptados en las...
Google podría tener su propio banco Siguiendo los pasos de Amazon que ya anunció opciones de crédito a sus vendedores online, Google estaría considerando ingresar al negocio financiero o...