html - 用户选择不适用于 :visited

Question

我在一个数学网站上工作，它有一些练习，页面底部有解决方案。我想让解决方案在用户滚动时隐藏起来，并且需要单击该 block 才能显示答案。我只想使用 css 和 html 来实现这一点。这是我到目前为止所做的:

HTML:

<div class="solution s1">
  <a href="#s1">2+2=4</a>
</div>

CSS:

.solution {
  width:80%;
  margin:25px auto;
}

.solution a:visited{
  color:black;
  background-color:white;
  user-select:text;
}

.solution a{
  background-color:#49FF59;
  display:block;
  width:100%;
  padding:25px;
  text-align:center;
  color:#49FF59;
  text-decoration:none;
  user-select: none;
}

除了用户选择之外，这段代码工作得很好。我想要它，以便用户在单击该 block 之前无法复制解决方案。但是 a:visited 不会应用 user-select:text; 我试图添加更多的类，但我无法修复它。请记住，大部分 CSS 都是用于星号的。

Answer 1

如果我是对的，您尝试采取的方法是防止某人进行全选并由于文本被突出显示而在屏幕上看到解决方案。

如果是这种情况，可以使用更好的样式属性，尤其是 visibility 或 display。

例如，您可以使用 visibility: hidden 或 display: none 来隐藏解决方案，直到满足特定条件为止。

我还建议不要将 :visited 用于类似这样的事情，除非您为计划覆盖的每个问题(如果您使用 href='#')设置了特定的 url，然后一旦你点击一个，他们都被“访问过”)。使用 :visited 时，您还会遇到浏览器缓存问题。

例如，您可以将容器更改为可点击元素，并使用 visibility 隐藏您的内容，然后在 :active 状态下显示答案到 :visited 状态。这将在按下鼠标按钮时显示答案。在正常情况下，文本是不可选择的，因为它是隐藏的。如果您想在点击后保持显示但不使用 :visited，您需要一个 javascript 解决方案。

值得一提的是，此解决方案不会在源代码中隐藏答案，但正如您在上面提到的，这不是您关心的问题。

.solution {
  width:80%;
  margin:25px auto;
  background-color:#49FF59;
  display:block;
  width:100%;
  padding:25px;
  text-align:center;
}

.solution:active {
  color:black;
  background-color:white;
  user-select:text;
}

.solution:active a {
  color:black;
  background-color:white;
  visibility:visible;
}

.solution a{
  text-align:center;
  text-decoration:none;
  visibility: hidden;
}

<div class="solution s1">
  <a href="#s1">2+2=4</a>
</div>