5

彼は私がCSS 3の機能を調査していて、いくつかの問題に遭遇しました:

テーブルの場合、この CSS を作成しました。

table.sortable tbody tr td {
    border-bottom:1px solid;
    height: 20px;
}

table.sortable tbody tr:hover {
    background-color:#BCD2E5 !important;
}

table.sortable tbody tr:nth-child(odd) td {
    background-color: #F3FAFF;
}
table.sortable tbody tr:nth-child(even) td {
    background-color: #FFFFFF;
}

table.new{
    background-color: rgb(255, 255, 187);
}

table.reaction{
    background-color: rgb(255, 128, 64);
}

table.send{
    background-color: rgba(154, 211, 109, 0.470588);
}

問題は、ホバーが機能していないことですが、nth-child セレクターをコメントアウトすると、実際には機能します。また、場合によっては、いくつかの行に異なる背景色を与える必要があります。これはユーザー向けであるため、一部のアイテムのステータスを非常に簡単に確認できます。したがってclass="send"、行にようなクラスを割り当てる場合、クラスが送信する背景色を取得する必要があります。

なぜこれがうまくいかないのですか？または私は何かを逃した!?

4

1 に答える 1

16

行の を に適用しbackground-colorています。のは の上に表示されています。nth-childtdbackground-colortdbackground-colortr

CSS を次のように変更するとうまくいきました (td最後のnth-childセレクターから を削除します)。

table.sortable tbody tr:hover {
    background-color:#BCD2E5 !important;
}

table.sortable tbody tr:nth-child(odd) {
    background-color: #F3FAFF;
}
table.sortable tbody tr:nth-child(even) {
    background-color: #FFFFFF;
}

また

次のように、セレクターtdの最後に追加します。hover

table.sortable tbody tr:hover td {
    background-color:#BCD2E5 !important;
}

このコードペンを参照してください: http://codepen.io/keithwyland/pen/woLmh

また

CSSのhoverセレクターの後にセレクターを移動する場合、 . したがって、次のようになります。nth-child!important

table.sortable tbody tr:nth-child(odd) {
    background-color: #F3FAFF;
}
table.sortable tbody tr:nth-child(even) {
    background-color: #FFFFFF;
}

table.sortable tbody tr:hover {
    background-color:#BCD2E5;
}
于 2013-04-24T13:28:15.260 に答える