访问状态后按钮的背景颜色问题答案

【问题标题】：Issue with background color of a button after visited state访问状态后按钮的背景颜色问题
【发布时间】：2015-04-12 19:40:25
【问题描述】：

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

https://jsfiddle.net/vivekraj_kr/wxokhpy4/

如何在访问的按钮上获得背景颜色

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

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

在css :visited 选择器中仅用于链接元素。因此，您可以使用 :active 选择器代替 :visited。

【讨论】：

【解决方案2】：

尝试使用<a>，因为<button> 与:visited 无关

a.button {
    height:27px;
    width: 27px;
    background: none;
    border: solid 1px #ccc;
    padding: 5px 8px;
    text-decoration: none;
    color: #444;
    font: 80% Arial, sans-serif;
    outline: none;
    background-color: white;
}

a.button:visited {
     background-color: red;   
}

<a href="#" class="button">S</a>
<a href="#" class="button">M</a>
<a href="#" class="button">L</a>
<a href="#" class="button">XL</a>

JSFiddle

注意：Google Chrome 在设置a:visited 属性时存在问题。查看更多here 和here。

希望对您有所帮助。

【讨论】：

@VIVEKRAJ 您还可以为所选按钮添加一个类，并根据需要设置其样式。但是我会为此使用 JavaScript/jQuery。

【解决方案3】：

你可以试试这个：- 小号米大号加大码

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

【讨论】：