JQuery 动态添加的 DOM 丢失(不)CSS 样式

Question

我遇到一个问题，在 JQuery 中，动态添加的 DOM 节点不采用 CSS 文件中定义的样式。

我环顾四周，the answers I've seen , 不要解决问题。即，相关 CSS 位于相对于主机页面的路径中。绝对是内存中的。但是，如果我使用 A) 或 B)，附加或加载的“newNode”不会采用已经加载的样式。

A) $("#some-selector").append(newNode);

B) $("#some-selector").load("/path/to/newNode.html");

我发现我必须像这样手动添加样式

C) $(".loadedElement").css('some-style','some-value');

有人解决了吗？

提前致谢。

--- 编辑

所以我走得更远了。我有一个像 A) 的 HTML 和像 B) 的 CSS。事实证明，嵌套的 CSS 选择器与我想要的节点不匹配。我不得不像在 C) 中那样使用选择器。然后我的动态节点应用了样式。但我真的更喜欢 B) 这样的东西。我的 CSS 关闭了吗？

一个)

<div id='6bullet-container'>
  <input id='six-bullet-image-upload' name='convert' type='file'>
    <div class='six-bullet-content-wrapper'>
      <div class='six-bullet-container-label'>
        click to upload
      </div>
      <div id='six-bullet-title'></div>
      <div class='six-bullet-bullet' id='six-bullet-one'></div>
      <div class='six-bullet-bullet' id='six-bullet-two'></div>
      <div class='six-bullet-bullet' id='six-bullet-three'></div>
      <div class='six-bullet-bullet' id='six-bullet-four'></div>
      <div class='six-bullet-bullet' id='six-bullet-five'></div>
      <div class='six-bullet-bullet' id='six-bullet-six'></div>
   … 

B)

#6bullet-container #six-bullet-image-upload .six-bullet-content-wrapper .six-bullet-bullet {
   my: style;
}

C)

.six-bullet-bullet {
    my: style;
}

Answer 1

这个 CSS 选择器:

#6bullet-container #six-bullet-image-upload .six-bullet-content-wrapper .six-bullet-bullet  { ... }

暗示“six-bullet-content-wrapper”是“six-bullet-image-upload”的 child ，这是不可能的，因为“six-bullet-image-upload”是一个文件输入框，不能有 child 。