如何更改 CSS 中“已访问”按钮的背景颜色？答案

【问题标题】：How to change the background-color of a "visited" button in CSS?如何更改 CSS 中“已访问”按钮的背景颜色？
【发布时间】：2019-02-06 01:45:26
【问题描述】：

我正在尝试在单击按钮后更改按钮的背景颜色（并可能使您无法再次单击它），但不知道如何更改颜色。我只想为此使用 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;
}

&lt;button class="button" type="button" onclick="onClick()"&gt;Button&lt;/button&gt;

【问题讨论】：

标签： html css button

【解决方案1】：

你不能只使用 HTML 和 CSS；你需要 JavaScript。请注意，在您的按钮中，onclick="onClick()" 是 JavaScript function。

使用 JavaScript，您可以将按钮类名称更改为 button visited，这使得 .button 和 .visited 的 CSS 选择器起作用。

请注意，:visited 用于a 标签而不是按钮。以 sn-p 为例：

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 &lt;a&gt; visited</a>
</body>
</html>

更新

如果onclick 事件有超过 1 个元素，您可以使用：

<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

【讨论】：

我试过了，但我的代码仍然不起作用。我在完整代码中有一个 java 脚本函数，我只是没有在这里发布。我只希望有人单击按钮并更改背景颜色。我不希望按钮链接到任何东西或做任何其他事情。我该怎么做？
你能添加你的javascript代码或者做一个sn-p/fiddle吗？
JavaScript 代码是 HTML 格式。我基本上是在尝试制作一个琐事游戏，其中有一些按钮是选项，当你点击错误的答案时，它会变成不同的颜色并且什么都不做。继承人的 javascript:
我没有发现任何问题。你能看到更新的sn-p吗？（请注意，我注释掉了 2 部分，你也不需要注释掉）可能你错过了上面的一些解释。如果您有任何问题，请再次评论:)
你注释掉的部分是javascript中需要的，它不应该影响css。我想要的只是能够拥有一个什么都不做的按钮，当点击改变颜色时。它不需要与我拥有的代码，我只是希望能够在代码中使用它。

【解决方案2】：

你可以做你想做的事，但不能使用按钮标签。 :visited 选择器用于选择访问过的“链接”，因此它只适用于带有 href 字段的锚标记。

来自 w3schools：

浏览器限制了可以为 a:visited 链接设置的样式，因为安全问题。

允许的样式是：

color
background-color
边框颜色（和边框颜色分开的边）
轮廓颜色
column-rule-color
颜色部分填充和描边

所有其他样式都继承自a:link。

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

&lt;a class="button" href="google.com" target="_blank"&gt;Button&lt;/a&gt;

如果您的项目特别想避免使用 href，那么您将不得不使用 javascript。如果您还希望在页面重新加载后保留样式，则必须使用会话从后端进行。

【讨论】：