css - 個々のアイテムの一般的な CSS スタイルをオーバーライドしますか?

Question

タイトルが少し曖昧で申し訳ありません。私はこの質問をどのように表現すればよいかよくわかりませんでした。私は現在、スタイルを持っています:

#exampleTable th {
background-color: #333;
}

ご覧のとおり、スタイルは特定のテーブルのヘッダータグに適用されます。私の質問は、このテーブルの背景色の個々のヘッダーを別のものに変更するにはどうすればよいですか? 私の一般的なスタイルによってオーバーライドされているため、属性が機能しません。どうすればこれを達成できますか? ありがとう。

score 4 · Accepted Answer

!importantインラインスタイルで使用すると、動作するはずです。

<th style="background-color: red !important">

score 0 · Accepted Answer

古いブラウザー (特に IE) との互換性を気にしない場合は、:nth-child() 疑似クラスを使用できます。

#exampleTable th:nth-child(3){color:green}

古いブラウザをサポートしたい場合は、Mike の提案に従い、上書きしたい TH ごとにクラスを追加します (または、jQuery を使用してクロスブラウザ互換性を持つ nth-child を利用します)。

"!important" の使用は、デバッグ目的でのみ行う必要があります。

score 0 · Accepted Answer

十分に高い特異性を持つ組み合わせセレクターを使用するだけであれば、属性セレクターを使用しても問題なく機能します。たとえば<th class=foo>...</th>、セルと次のような CSS ルールに使用します。

#exampleTable th.foo {
  background-color: blue;
}

ここで、セレクターには.foo、一般的なルールよりも 1 つ多くの要素 (クラスセレクター) があります。これにより、より高い特異性が保証されます。

score 0 · Accepted Answer

CSS は外部ドキュメント (.css ファイル) にありますか? その場合、インラインスタイルで上書きされます。あなたは何かをすることができますlJavaテンプレートクラス:

<table class='someclass'>
    <thead>
        <tr>
            <th></th>
            <th style='background-color: red;'></th>
            ....

ただし、クラスを使用する方が効率的だと思います。クラスルールを一般的な th ルールよりも具体的にする必要があります。例えば

#exampleTable th {
background-color: #333;
}
#exampleTable th.myclass {background-color: #00f;}

クラスのある th はmyclass赤になり、クラスのない th は濃い灰色になります。

4 に答える 4