CSS3目标选择器问题

Question

我正在自学JS/HTML5/CSS3，通过研究、组合和修改3个不同作者的代码示例。我的工作笔(包括对原作者的引用)可以在这里找到

http://codepen.io/Widgeteria/pen/jqpyYb

我的问题是，当您单击Dropzone或Notes分区时，如何使时间元素在狭窄的蓝色垂直任务时钟分区或部分中不可见(通过单击start按钮启动秒表之后)。

我尝试了各种方法(包括嵌入的CSS规则)，但在我单击另一个部分后，无法使模糊的时钟数字从垂直部分框中消失。

下面是时钟的设置方式：

<h1><time>00:00:00</time></h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>

当target:切换到除任务时钟之外的其他部分时，我正在尝试使<time>标记不可见，并在单击back时再次可见。

我遇到的第二个问题是试图修改JS，这样如果我单击两次Start按钮，时钟就不会继续运行。

任何关于如何解决这两个问题的想法都将不胜感激。

Answer 1

对于CSS部件，您应该更改此设置

:target time {
  visibility: hidden;
}

还有这个

,time {
  visibility: visible;
}

要这样做：

:target #time {
  visibility: hidden;
}

还有这个

#time {
  visibility: visible;
}

另外，在包含<time>标签的<h1>标签上添加一个id="time"。

问题出在:target的事情上。It 只能与It一起工作，而不能与标签本身一起工作。

对于Javascript部分，您可以修改计时器函数以：

function timer() {
 if(t)
   clearTimeout(t);
 t = setTimeout(add, 1000);
}

如果超时已经运行，这将清除超时，因此您不会丢失对已经启动的超时的引用，也不会运行并行超时。

那多保重。