5

CSS宣言の優先度に問題があります。私のページには、ルールとそのルールをオーバーライドすることになっているいくつかのインラインCSS宣言を含む外部CSSファイルが含まれています。私の理解では、インラインスタイル宣言は外部CSS宣言をオーバーライドする必要があります。ただし、Chromeでページを表示すると、テーブルの2行目が青で表示されますが、内部スタイル宣言で定義されているように赤で表示されます。

ここで何が欠けていますか

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>

CSSファイルの内容は次のとおりです。

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

2 に答える 2

16

セレクターの数は、どのルールが最も高い特異性を持っているかを計算するときに重要です。

CSSの特異性の2つの優れた視覚化は、http ：//www.standardista.com/css3/css-specificity/とhttp://www.stuffandnonsense.co.uk/archives/css_specificity_wars.htmlです。

!importantオーバーライドするルールに固執するのを避け（ CSSで「！important」を使用することの意味は何ですか？を参照）、代わりにセレクターを変更して、インポートされたルールと同等以上の重みをルールに与えます。

たとえば、次のようにすると、すべてのセルが作成されますbackground:red

thead tr:nth-child(1n) th, tbody tr:nth-child(1n) td {
    background:red;
}
于 2012-08-23T08:53:05.287 に答える
2

この場合、より詳細なルールがそれを取得します。

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>

よろしくお願いします

于 2012-08-23T09:00:12.410 に答える