Prioridad de estilo Css

Estoy teniendo problemas con la prioridad de statement CSS. Mi página contiene un archivo CSS externo con una regla y algunas declaraciones CSS en línea, que se supone deben anular esa regla. A mi entender, las declaraciones de estilo en línea deben anular las declaraciones externas de CSS. Sin embargo, cuando veo la página en Chrome, la segunda fila de la tabla se muestra en azul, cuando debe mostrarse en rojo como se define en las declaraciones de estilo internas.

Que me estoy perdiendo aqui

Aquí está el HTML:

    td,tr,th { background: Red; }    
11 22
aa bb

Aquí está el contenido del archivo CSS:

 tbody tr:nth-child(even) td, tbody tr.even td { background: #e5ecf9; } 

El número de selectores importa al calcular qué regla tiene la mayor especificidad.

Dos visualizaciones excelentes de la especificidad CSS son http://www.standardista.com/css3/css-specificity/ y http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Debería evitar omitir !important en la regla para anular (consulte ¿Cuáles son las implicaciones de usar “! Important” en CSS? ) Y cambie el selector para dar a su regla más o igual peso a la regla importada.

Por ejemplo, lo siguiente hará que todas las celdas de background:red

 thead tr:nth-child(1n) th, tbody tr:nth-child(1n) td { background:red; } 

En este caso, la regla más detallada lo obtendrá.

Prueba esto en tu HTML:

  

Atentamente