Cuando varias reglas CSS afectan a un mismo elemento. El browser considera como mas importante regla CSS a la que presenta la tupla (A->maximo_peso: Estilo en linea, B: numero de IDs, C: numero de Clases, D->minimo_peso: numero de marcas HTML) ganadora en valor de todas las reglas CSS que compiten, de forma que si hay empate en A, se mira B, y asi sucesivamente.
| TUPLAS CSS.- | ||
|---|---|---|
| h1{ color: purple; } | Puntuacion:(0, 0, 0, 1) | |
| h1{ color: green; } | Puntuacion:(0, 0, 0, 1) | |
| header h1{ background-color:black; color:orange; } | Puntuacion:(0, 0, 0, 2) | |
| #caja header h1{ background-color:gray; color:yellow; } | Puntuacion:(0, 1, 0, 2) | |
| #caja .cabecera h1{ background-color:midnightblue; color:lightblue; } | Puntuacion:(0, 1, 1, 1) (GANADORA) | |