可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am having problems with CSS declaration priority. My page contains an external CSS file with a rule and some inline CSS declarations, which are supposed to override that rule. To my understanding inline style declarations should override external CSS declarations. However, when I view the page in Chrome the second row of the table is displayed blue, when it should be displayed red as defined in the internal style 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 is the content of the CSS file:

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

回答1:

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

Two excellent visualizations of CSS specificity are http://www.standardista.com/css3/css-specificity/ and http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

You should avoid just sticking !important on the rule to override (see What are the implications of using "!important" in CSS?) and instead change the selector to give your rule more or equal weight to the imported rule.

For example the following will make all cells background:red

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

回答2:

In this case the more detailed rule will get it.

Try this in your HTML:

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

Best regards