I can't seem to figure out CSS declaration priority. I have an external CSS file with a rule and some inline CSS declarations that are supposed to override it. According to my understanding, inline styles should take precedence over external CSS rules. But in Chrome, the second row of the table is displaying blue instead of red as defined in the internal style declarations.
What am I overlooking here?
Below is the HTML code:
<html>
<head>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
<style type="text/css">
td,tr,th
{
background: Red;
}
</style>
</head>
<body>
<table>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
</body>
</html>
And here is the CSS file content:
tbody tr:nth-child(even) td,
tbody tr.even td
{
background: #e5ecf9;
}