Html 访问状态后按钮的背景色出现问题

访问状态后按钮的背景色出现问题

如何在按钮上获得背景色

<button type="button" class="size_btn">S</button>
<button type="button" class="size_btn">M</button>
<button type="button" class="size_btn">L</button>
<button type="button" class="size_btn">XL</button>



.size_btn {
height:27px;
width: 27px;
background: none;
border: solid 1px #ccc;
}

.size_btn:visited {
background-color: #479c3d;
}

S
M
L
特大号
.尺寸{
高度：27px；
宽度：27px；
背景：无；
边框：实心1px#ccc；
}
.size_btn：已访问{
背景色：#479c3d；
}

您可以尝试以下方法：- s M L XL

.尺寸{
高度：27px；
宽度：27px；
背景：无；
边框：实心1px#ccc；
}
/*未访问链接*/
.size_btn：链接{
背景颜色：绿色；
}
/*访问链接*/
.size_btn：已访问{
背景颜色：绿色；
}
/*鼠标悬停链接*/
.size_btn：悬停{
背景色：红色；
}
/*选定链接*/
.size_btn：活动{
背景颜色：黄色；
} 

尝试使用

在css中：已访问的选择器仅用于链接元素。因此，您可以使用：active选择器来代替：visted。

@VIVEKRAJ您还可以向所选按钮添加一个类，并根据需要设置其样式。不过，我会使用JavaScript/jQuery来实现这一点。

<style>



.size_btn {
    height:27px;
    width: 27px;
    background: none;
    border: solid 1px #ccc;
}
/* unvisited link */
.size_btn:link {
    background-color: green;
}

/* visited link */
.size_btn:visited {
    background-color: green;
}

/* mouse over link */
.size_btn:hover {
    background-color: red;
}

/* selected link */
.size_btn:active {
    background-color: yellow;
} 
</style>