css - CSSは両方のクラスで重複したコードを削除しますか?

Question

以下の CSS スタイルに HTML アンカー タグを適用しました。

.my_button .left {
        float: left;
        width: 10px;
        height: 19px;
        background: url("./images/bl.png") left center no-repeat;
    }

    .my_button .right {
        float: left;
        width: 10px;
        height: 19px;
        background: url("./images/br.png") left center no-repeat;
    }

アンカー タグにマウスを合わせると、もう 1 つの CSS スタイルが適用されます。以下のコードは、背景 URL を除いた上記の CSS スタイルとほとんど同じです。cssコードの重複を避けることは可能ですか?

.my_button_hover .left {
        float: left;
        width: 10px;
        height: 19px;
        background: url("./images/bl-active.png") left center no-repeat;
    }
.my_button_hover .right {
    float: left;
    width: 10px;
    height: 19px;
    background: url("./images/br-active.png") left center no-repeat;
}

ありがとう！

Answer 1

このような

.my_button .left,.my_button .right {
        float: left;
        width: 10px;
        height: 19px;
        background: url("./images/bl.png") left center no-repeat;
    }

    .my_button .right {
        background: url("./images/br.png") left center no-repeat;
    }

そしてホバーのために

.my_button:hover .left,.my_button:hover .right {
        float: left;
        width: 10px;
        height: 19px;
        background: url("./images/bl-active.png") left center no-repeat;
    }
.my_button:hover .right {

    background: url("./images/br-active.png") left center no-repeat;
}