Question

我的主页www.example.com上有一个指向页面B的按钮-> www.example.com/page-B

我将CSS用作：hover状态，因此当我将鼠标悬停在主页上的按钮上时，它会变成红色。

但是我要实现的是按钮被单击并到达目标页面www.example.com/page-B

时，按钮变为红色并保持红色。

我希望通过：active或：focus状态来完成它，但是那行不通。

我该如何实现？

Answer 1

单击按钮时，焦点将移至该按钮。因此，将应用button的：focus伪类中的样式。但是，一旦用户单击另一个按钮或通过按Tab键更改焦点，您的按钮就会失去其“焦点”状态。

一个可用的选项是使用：visited伪类。您需要将按钮包装在锚标记（<a></a>）周围。假设您给锚标签添加了.link类。

<a href="https://example.com/page-b" class="link">
    <input type="button" value="next page" />
</a>

然后CSS应该是

.link:visited > button {
   color: blue;
}

请注意，我定位了子元素，这些元素是锚元素下的按钮。我这样做是因为按钮没有：visited伪类，您可以直接使用它。但是，根据MDN，

出于隐私原因，使用此选择器可以修改的样式非常有限。

所以我认为您不能使用这种方法使背景变成红色（我尝试过但没有用）。此外，即使用户重新访问了您的网站或重新加载了页面，用户访问链接后，按钮停留的样式也仍然为“：visited”，因为这是anchor元素的工作方式。

我的建议是，您应该在此处使用javascript。我对wordpress不太了解，也不知道是否可以在wordpress中使用js。但是通常，即使在wordpress中，您也可以使用<script>标签。

我的方法...

function nextpage() {
  window.open("https://www.example.com/page-b", "_blank");
  document.getElementById("next").style.backgroundColor = "red";
}

<input type="button" value="next" onclick="nextpage()" id="next" />

即使我放了一个代码段，也可能由于安全策略而无法在stackoverflow中使用，但这在现实生活中应该可以使用。我在同一标签中打开“ example.com/page-b” “ example.com”标签将关闭，当用户重新打开该标签时，按钮的样式将会丢失。

如果要保留按钮的红色背景，请使用js，在用户单击按钮时设置一个cookie，并在用户重新加载页面时，如果该cookie存在，则将按钮设置为访问时的样式。