Geek asks and answers

CSS style priority

I'm having problems with CSS ad priority. My page contains an external CSS file with a rule and some inline CSS declarations that should override this rule. In my understanding, inline style declarations should override external CSS declarations. However, when I view a page in Chrome, the second row of the table is shown in blue when it should be displayed in red, as defined in the style's internal declarations.

What am I missing here

Here is the HTML:

<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>

Here are the contents of the CSS file:

tbody tr:nth-child(even) td,
tbody tr.even td
{
    background: #e5ecf9;
}
+5
source share
2 answers

The number of selectors matters when calculating which rule has the highest specificity.

CSS-: http://www.standardista.com/css3/css-specificity/ http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

!important (. "" CSS?) , .

, background:red

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

.

HTML:

<style type="text/css" media="screen, projection">
    tbody tr:nth-child(even) td,tr,th
    {
        background: Red;
    }
</style>

+1

More articles:


All Articles