23

Bootstrap 3 を使用しており、いくつかのデータを示すテーブルがあります。この表では、条件付き書式設定に JavaScript を適用しました。条件が満たされた場合、要素のクラスを「赤」に設定します。

.red {
background-color:red;
color:white;
}

要素 HTML は次のとおりです。

<td class="red">0</td>

テキストの色が適用される奇数行で競合が発生しましたが、背景色はブートストラップの次の css によってオーバーライドされます。

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

この競合を解決し、赤いクラスが優先されるようにするにはどうすればよいですか?

4

8 に答える 8

51

特異性

あなたの問題は、特異性に関する可能性が最も高いです。Chris Coyier は、CSS の特異性に関する優れた記事を書いています。また、こちらの便利な特異度計算機もご覧になることをお勧めします。

その計算機を使用すると、特異度が 23 であることがわかり.table-striped > tbody > tr:nth-child(odd) > tdます。そのため、それを無効にするには、新しいルールに 23 以上の特異度が必要です.red。それ。

この場合、既存の特異性を一致させてから、それにクラスを追加するだけの簡単なものにする必要があります。.table-striped > tbody > tr:nth-child(odd) > td.red33 の特異性が得られます。33 は 23 より大きいため、ルールが機能するはずです。

ここで実際の例を参照してください: http://bootply.com/91756

！重要

一般に、!importantそのルールをオーバーライドしたくない場合を除き、決して使用しないでください。!important基本的に核オプションです。特異性を理解していれば、!importantBootstrap のようなフレームワークでカスタム ルールを適切に機能させる必要はまったくないはずです。

アップデート

少し考えた結果、ここで提供するルールはおそらく少し具体的すぎるでしょう。ストリップされていないテーブルのセルを強調表示したい場合はどうなりますか? ストリップされたテーブルで機能するのに十分な特異性を持ちながら、ルールをもう少しグローバルにするために、私は.table > tbody > tr > td.red. これは Bootstrap ストリップと同じ特異性を持っていますが、ゼブラ ストリップされていないテーブルでも機能します。更新された例はこちら: http://bootply.com/91760

于 2013-11-04T15:25:02.260 に答える
5

まず、ショーン・ライアンの答えを読んでください-それは非常に有益で有益ですが、コードに実装する前に彼の答えを十分に調整する必要があり、次の人に役立つかもしれない明確な答えが必要でした.

OPとほぼ同じ質問がありましたが、行も強調表示できる必要がありました。以下は、Sean Ryan の回答を拡張 (?) し、それを最終的な実装に変えた方法です。これにより、「tr」または「td」を含むほとんどのランダム要素にクラスを追加できます。

bootply.comでこれを参照してください。

CSS

    /* enable 'highlight' to be applied to most anything, including <tr> & <td>, including bootstrap's aggressive 'table-stripe'
see: http://stackoverflow.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css

FYI: In the stack overflow question, the class is 'red' instead of 'highlight'
FYI: This is forked from http://www.bootply.com/91756

I used three different colors here for illustration, but we'd
likely want them to all be the same color.
*/

.highlight {
    background-color: lightyellow;
}


/* supersede bootstrap at the row level by being annoyingly specific 
*/
.table-striped > tbody > tr:nth-child(odd).highlight > td {
    background-color: pink;
}

/* supersede bootstrap at the cell level by being annoyingly specific */
.table-striped > tbody > tr:nth-child(odd) > td.highlight {
    background-color:lightgreen;
}

HTML

<table class="table table-striped">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1hi</td>
            <td>hi</td>
            <td>hi</td>
        </tr>
        <tr class="highlight">
            <td>2hi</td>
            <td>This row highlights fine since it was an even row to begin with, and therefore not highlighted by bootstrap</td>
            <td>hi</td>
        </tr>
        <tr class="highlight">
            <td>3hi</td>
          <td>This whole row should be highlighted.</td>
            <td>hi</td>
        </tr>
        <tr>
            <td>4hi</td>
            <td>hi</td>
            <td>hi</td>
        </tr><tr>
            <td>5hi</td>
            <td class="highlight">Just a specific cell to be highlighted</td>
            <td>hi</td>
        </tr>
    </tbody>
</table>
于 2014-07-30T15:41:58.133 に答える
1

!important優先したい値の後に の値を適用できます。

于 2013-11-04T13:35:10.543 に答える
0

問題を使用した後も、同様!importantの問題がありました。

問題は、使用しているブラウザーによって異なります。私の場合は Chrome でした。通常、chrome は頻繁に使用されるサイトを保存し、常に完全にページをリロードするとは限りません。

この問題は、クロムの履歴またはCtrl++をクリアした後にのみ解決されましたShift。R

于 2020-06-02T14:26:33.797 に答える