我试图改变一个按钮的背景颜色已经被点击之后，它（和可能让这个你不能再点击），但无法弄清楚如何改变颜色。我想只用HTML和CSS这一点。我该怎么做呢？
body {
background-color: white;
}
.button {
font-family: "Arial", sans-serif;
background-color: black;
border: 10px dashed white;
color: white;
font-size: 30px;
text-align: center;
line-height: 0;
cursor:pointer;
border-radius: 8px;
height:200px;
width:400px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.button:visited{
background-image:none;
background-color: red;
font-size: 35px;
border: 10px dashed black;
color: black;
}
.button:hover{
background-image:none;
background-color: white;
font-size: 35px;
border: 10px dashed black;
color: black;
}<button class="button" type="button" onclick="onClick()">Button</button>你不能只用HTML和CSS;你需要的JavaScript。请注意，在你的按钮onclick="onClick()"是JavaScript function。
使用JavaScript你可以改变按钮类名称为button visited这使得.button和.visited工作的CSS选择器。
需要注意的是:visited上使用a标签，而不是一个按钮。见片断，例如：
var clicks = 0;
function onClick(event) {
event.className = "button visited";
if (clicks >= 2) {
alert("WRONG! YOU LOSE! TRY AGAIN!");
// window.location.href = 'index.html';
}
clicks += 1;
// document.getElementById("clicks").innerHTML = clicks;
};body {
background-color: white;
}
.button {
font-family: "Arial", sans-serif;
background-color: black;
border: 10px dashed white;
color: white;
font-size: 30px;
text-align: center;
line-height: 0;
cursor:pointer;
border-radius: 8px;
height:200px;
width:400px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.visited{
background-image:none;
background-color: red;
font-size: 35px;
border: 10px dashed black;
color: black;
}
.button:hover{
background-image:none;
background-color: white;
font-size: 35px;
border: 10px dashed black;
color: black;
}
a:visited {
color: purple;
}<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<button id="button1" class="button" type="button" onclick="onClick(this)">Button1</button>
<button id="button2" class="button" type="button" onclick="onClick(this)">Button2</button>
<button id="button3" class="button" type="button" onclick="onClick(this)">Button3</button>
<br/><a href="#">Test <a> visited</a>
</body>
</html>如果你有超过1元的onclick事件中，你可以使用：
<button id="button1" class="button" type="button" onclick="onClick(this)">Button1</button>
<button id="button2" class="button" type="button" onclick="onClick(this)">Button2</button>
<button id="button3" class="button" type="button" onclick="onClick(this)">Button3</button>
然后转变成
function onClick(event) {
event.className = "button visited";
// rest of code below
您应该使用:visited的链接，不button寂寞。考虑使用a标签insted的button的，就像这样：
<a href="#" class="button" type="button" onclick="onClick()">Button</a>
如果你想第一次点击之后无法点击，你还可以添加一个JavaScript代码引用您onclick功能，就像这样：
function onClick () {
this.style.pointerEvents = "none";
}
你可以做你想做什么，但不与按钮标签。该:visited选择用于选择参观“链接”，因此它只能在同领域的href锚标记。
从W3Schools的：
浏览器限制可以为一个设定的样式：访问过的链接，由于安全问题。
允许的风格是：
颜色 背景颜色 边框颜色（和边框颜色单独边） 轮廓颜色 列治色 填充和中风的彩色部分
链接：所有其他样式是从继承。
body {
background-color: white;
}
.button {
font-family: "Arial", sans-serif;
background-color: black;
border: 10px dashed white;
color: white;
font-size: 30px;
text-align: center;
line-height: 0;
cursor:pointer;
border-radius: 8px;
height:200px;
width:400px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.button:visited{
background-image:none;
background-color: red;
font-size: 35px;
border: 10px dashed black;
color: purple;
}
.button:hover{
background-image:none;
background-color: white;
font-size: 35px;
border: 10px dashed black;
color: blue;
}<a class="button" href="google.com" target="_blank">Button</a>如果你的项目特别要避免HREF，那么你将不得不使用JavaScript。如果您还想要的样式保持页面重新加载后，那么你必须使用会话从后端做到这一点。