Javascript。我能'；不要更改计时器的CSS

我有一个简单计时器的代码。我按下按钮后，它调用一个函数（2个变量=创建后放置计时器的div的id，以及秒数），该函数使用innerHTML编写计时器。我想在一个单独的CSS文件中更改HTML之外的计时器样式。但它不起作用，即使我将计时器代码封装到div中，并在CSS中调用它的id。到目前为止，我只能在函数中使用它。 为什么会发生这种情况，我如何解决这个问题

。按钮{
显示：内联块；
边界半径：4px；
背景色：#F451E；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：28px；
填充：20px；
宽度：200px；
过渡：均为0.5s；
光标：指针；
保证金：5px；
}
.按钮跨度{
光标：指针；
显示：内联块；
位置：相对位置；
过渡：0.5s；
}
.按钮跨度：之后{
内容：“»”；
位置：绝对位置；
不透明度：0；
排名：0；
右：-20px；
过渡：0.5s；
}
.按钮：悬停范围{
右边填充：25px；
}
.按钮：悬停范围：之后{
不透明度：1；
右：0；

//定时器功能
功能计时器（标记，秒）{
document.getElementById（标记）.innerHTML=”“+
（秒/60>>0）+“分钟”+秒%60+“秒”+”
“+”；
如果（（秒/60>>0）！=0 | |（秒%60）！=0）{
setTimeout（函数（）{timer（tag，sec）；}，1000）；
sec-=1；
}
否则{
document.getElementById（tag.innerHTML=“时间结束！”；}
}





启动测试

更新：尝试失败的原因是在

之后缺少大括号（
}
）。按钮：悬停span:在{

块之后。这将导致忽略以下规则

---

您还没有向我们展示您使用CSS进行此操作的尝试，因此我无法告诉您为什么它不起作用，但您会这样做：

#inTime {
  color: #ffffff;
  border-radius: 5px;
  background-color: #f4511e;
  padding: 20px;
  text-align: center;
  position: fixed;
  width: 200px;
}

例如：

。按钮{
显示：内联块；
边界半径：4px；
背景色：#F451E；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：28px；
填充：20px；
宽度：200px；
过渡：均为0.5s；
光标：指针；
保证金：5px；
}
.按钮跨度{
光标：指针；
显示：内联块；
位置：相对位置；
过渡：0.5s；
}
.按钮跨度：之后{
内容：“»”；
位置：绝对位置；
不透明度：0；
排名：0；
右：-20px；
过渡：0.5s；
}
.按钮：悬停范围{
右边填充：25px；
}
.按钮：悬停范围：之后{
不透明度：1；
右：0；
}
#时间{
颜色：#ffffff；
边界半径：5px；
背景色：#F451E；
填充：20px；
文本对齐：居中；
位置：固定；
宽度：200px；
}

//定时器功能
功能计时器（标签，秒）{
document.getElementById（标记）.innerHTML=“”+
（秒/60>>0）+“分钟”+秒%60+“秒”+”
“+”；
如果（（秒/60>>0）！=0 | |（秒%60）！=0）{
setTimeout（函数（）{
定时器（标签，秒）；
}, 1000);
sec-=1；
}否则{
document.getElementById（tag.innerHTML=“时间结束了！”；
}
}








启动测试

我试图在CSS中对其进行更改，但由于与原始函数的样式冲突，该样式始终被调用（始终刷新），因此无法正常工作

如果从函数中删除颜色并仅在CSS中设置，则可以根据需要自由更改颜色

。按钮{
显示：内联块；
边界半径：4px；
背景色：#F451E；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：28px；
填充：20px；
宽度：200px；
过渡：均为0.5s；
光标：指针；
保证金：5px；
}
.按钮跨度{
光标：指针；
显示：内联块；
位置：相对位置；
过渡：0.5s；
}
.按钮跨度：之后{
内容：“»”；
位置：绝对位置；
不透明度：0；
排名：0；
右：-20px；
过渡：0.5s；
}
.按钮：悬停范围{
右边填充：25px；
}
.按钮：悬停范围：之后{
不透明度：1；
右：0；
}
#时间{
颜色：“ff0000”；
背景颜色：绿色；
}

//定时器功能
功能计时器（标记，秒）{
document.getElementById（标记）.innerHTML=”“+
（秒/60>>0）+“分钟”+秒%60+“秒”+”
“+”；
如果（（秒/60>>0）！=0 | |（秒%60）！=0）{
setTimeout（函数（）{timer（tag，sec）；}，1000）；
sec-=1；
}
否则{
document.getElementById（tag.innerHTML=“时间结束！”；}
}





启动测试

您发布的CSS中似乎没有任何内容与

@Pointy有关是的，这是一个工作示例，CSS包含在HTML中。我将在一秒钟内发布一个带有单独CSS的示例。您的CSS中有一个错误。请参阅我的更新答案。