Javascript 使用appendChild后重写父css

我已经看到好几个帖子建议标记

！重要信息

在css样式中，以覆盖父级的css。但我遇到了这种情况：使用

document.createElement

创建子节点，然后将

appendChild

添加到父节点：

let parentNode = document.getElementById('parentId')
let childNode = document.createElement('div')
childNode.id = 'childId'
parentNode.appendChild(childNode)


#parentId {
  background-color: #6d7373;
  width: 99%;
  height: 40px;
}

#childId {
  background-color: yellow;
  width: 99%;
  height: 40px;
}

---

在这种情况下，

！重要信息

似乎不起作用。家长的css仍然占主导地位。有什么办法可以让它超控吗？谢谢。

编辑：使用

element.setAttribute（）

let parentNode=document.getElementById（'parentId'））
让childNode=document.createElement（'div'）
childNode.innerText='内部文本'
setAttribute（'id'，'childId'）
parentNode.appendChild（childNode）

#parentId{
颜色：红色
}
#孩子气的{
颜色：绿色
}

---

您是否尝试过给您的孩子一个与父类不同的类并设置其样式？@Jacob我给孩子一个唯一的id，并使用该id（背景色）设置其样式。但它并没有覆盖@它在我的电子里不起作用。背景是灰色的。我可以看出它在小提琴上起作用。谢谢，谢谢。是否有任何方法可以使用子ID而不是直接的

>div

？我在问题中添加了更多细节。@TristanTran请参阅我的编辑谢谢。这与Taplar的解决方案相同。不知怎的，它在我的电子应用程序中不起作用。无论如何，我要结束这一切。谢谢。@TristanTran听到这个消息很难过。您是否尝试了

childNode.id='childId'

而不是

setAttribute（）

？如果不是，你可以打开一个新的问题，并指定它的电子。