CSS未分配给javascript创建的元素-为什么？

我用Javascript创建了一个元素并将其应用到另一个元素，我还有一个CSS文件，其中包含了这个新元素的样式，我检查了代码，新元素存在并且具有给定的ID和类名，但是我的CSS没有被使用。代码如下所示：

var mainDiv=document.createElement("DIV");
mainDiv.id="ambiVid_controls";
mainDiv.className="ambiVid_controls";

Conts.parentNode.appendChild(mainDiv);

和CSS：

.ambiVid_controls{
    position:absolute !important;
    bottom:15px ;
    width:60% !important;
    height:50px !important;
    margin-left:50% !important;
    background-color:#333 !important;
    z-index:1000 !important;

}

有人知道为什么会忽略这一点，或者ApplyChild和CSS有任何已知的问题吗

---

浏览器是Safari，如果这很重要的话。

如果CSS是这样定义的，则不必添加className属性：

#ambiVid_controls
{
    position:absolute !important;
    bottom:15px ;
    width:60% !important;
    height:50px !important;
    margin-left:50% !important;
    background-color:#333 !important;
    z-index:1000 !important;    
}

当然，如果要添加具有该ID值的多个元素，则这将不起作用

编辑： 而不是：Conts.parentNode.appendChild（mainDiv）； .. 如果Conts是DOM中现有元素的ID，比如DIV，只需执行以下操作

---

续附件（主分区）

可能没有正确添加div。因为它在这里起作用

“Amyome am odea为什么这个igets忽略了”很抱歉，但说真的，你不能在编辑区或校对区做一点校对吗？我想我们需要更多的代码。这看起来应该行得通，我同意。冒着听起来毫无用处的风险，如果我没有在这个问题上花费精力，为什么我要在答案上花费精力呢？什么是

Conts

，它可以从

document.body

？为什么ID和类名都有相同的名称？使用一个或另一个…虽然OP确实可以使用ID，但这并不能解决OP的问题。在这个问题中，OP显然添加了一个具有相关类名的元素，该类名与所示的CSS匹配。更改CSS使其与元素的ID匹配不会有任何帮助。因此，目前我尝试了您所有的建议，但没有成功，我从JS中删除了ID，我还为父级添加了一个CSS选择器，我检查Safari Inspector，所有内容都正确添加，元素已创建并处于所需位置，但CSS未使用，未应用CSS类，元素仅使用默认CSS或由父级获得的CSS。。。