css - テーブル行に複数のクラスを持つ

Question

すべて、HTML 行の次の CSS があります。

.clickable_row:hover {
cursor: pointer;
}
.clickable_row:hover {
background-color: #FFFFCF;
}

次に、私のhtmlは次のようになります。

<tr class="clickable_row"><td>Text</td></tr>

ただし、最上位の行については、強調表示されたクラスも追加したいと思います。私はこのようなことをしようとしました:

<tr class="clickable_row highlighted"><td>Text</td></tr>

次に、次の CSS を追加します。

.clickable_row highlighed{
background-color: #BFDEFF;
}

これは行を強調表示しません。これを機能させる方法についてのアイデアはありますか?

ありがとう

score 2 · Accepted Answer

使用する

.clickable_row.highlighed{
    background-color: #BFDEFF;
}

あるいは単に

.highlighed{
    background-color: #BFDEFF;
}

セレクターclickable_rowは、highlighedタグであるクラスを持つ要素の子孫を探します

score 2 · Accepted Answer

クラス名にスペースを入れると、まったく新しいクラスが作成されるため<tr class="clickable_row highlighted">、クラス「clickable_row」と「highlighted」クラスが作成されます。

強調したい場合は、.highlighted { background-color: #BFDEFF; }

最適化したい場合は、おそらく:first-childセレクターを使用することをお勧めしますが、これにより、別のクラスを指定する必要なく、最初の行のみが強調表示されます

2 に答える 2