2

こんにちは、私はそのようなテーブルを持っていますか？

<table>

<colgroup>
    <col class="selected">
    <col>
</colgroup>

    <tbody>
      <tr>
          <td>lorem</td>
          <td>lorem</td>
      </tr>
    </tbody>
</table>

私のスタイルは次のとおりです。

col.selected {
background-color: #f3f3f3; /*for selected column*/
}

table tbody tr:nth-of-type(2n+2){
background-color:#fafafa; /*zebra effect*/
}

すべてがうまく機能しますが、ゼルバ スタイルは col 選択スタイルより優先されます。選択した列が nth child ではなく col のスタイルを使用するように回避する方法はありますか?

4

3 に答える 3

1

問題は、zebra背景のセレクターがセレクターよりも特異性colが高いことです。colセレクターの特異性を高くするか、セレクターの特異性をtr低くします (または両方)。それらが等しい場合、CSS のルールの順序が重要になります。

table colgroup col.selected {
    background-color: #f3f3f3; /*for selected column*/
} /* specificity: 13 */

table tr:nth-of-type(2n+2){
    background-color:#fafafa; /*zebra effect*/
} /* specificity: 12, will be overridden */
于 2013-05-09T19:02:16.713 に答える
0

html の col に選択されたクラスが適用されていないことを除けば、コードは問題なく見えます。これは実際のページの問題でしょうか (コード サンプルを投稿しただけだと思います)。

于 2011-11-19T12:52:12.237 に答える
0

私の知る限り、あなたはできません。最善の回避策は、正しい列を強調表示する CSS を動的にレンダリングすることです。たとえば、テーブルの 2 番目の列を強調表示するには、次のように使用できます。

table tbody tr td:nth-child(2) {
    background-color:red;  
}

例: http://jsfiddle.net/ChrisPebble/tbLrv/

于 2011-11-19T13:01:33.803 に答える