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;
    }

在将鼠标悬停在锚标记上时，正在应用另一种 css 样式。下面的代码与上面的 CSS 样式 excpet 背景 url 几乎相似。是否可以避免重复的 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 {
        width: 10px;
        height: 19px;
    }
.left {
        float: left;
        background: url("./images/bl.png") left center no-repeat;
    }
.left:hover {
        background: url("./images/bl.png") left center no-repeat;
    }

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

Answer 2

给公共属性一个公共类，并将该类应用于 html 元素。像这样：

.commons {
    float: left;
    width: 10px;
    height:19px;
}

.my_button .left {
        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 {
        background: url("./images/bl-active.png") left center no-repeat;
    }

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

在 HTML 标记中：

<a href="#" class="commons my_button left">...</a>
<a href="#" class="commons my_button_hover right">...</a>

人们也可以通过应用这些background-position, background-repeat选项来进一步优化。

编辑：你真的应该查找:hover选择器。

Answer 3

像这样

.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;
}