javascript - 在我使用 JQuery/JS 插入新元素后，HTML 无法识别我的 CSS

Question

所以我有这个元素，我想在其中为网站构建一个管理面板。当您单击特殊设置时，我会使用一个弹出框。

我想用 JavaScript 代码将 HTML 内容填充到这个弹出框中，这样我就可以只使用一个来进行所有设置

问题是，我在弹出框可见之前插入的 html 代码没有应用我想要的类的样式。

打开方式代码:

function open_popup_box(heading, content){
  $("#popup_box_heading").html(heading);
  $("#popup_box_content").html(content);
  $("#popup_box").fadeIn();
  $("#popup_box_bg").addClass("show");
}

我要从中插入元素的类在 style.css 中定义。唯一有用的是内联样式，但这不是一个选项，因为我想使用悬停和其他 css 东西

有人知道如何解决这个问题吗？

根据 CSS 的要求:

.custom_select{
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  padding: .5em;
  padding-right: 1.5em;
  width: 40%;
  font-size: 16px;
}

和 HTML:

<!-- Just to let you know in wich order i loaded the files -->
  <link rel="stylesheet" type="text/css" href="external/css/style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="external/js/globalfunctions.js"></script>



<div id="popup_box">
    <table id="popup_box_table">
      <tr id="popup_box_header">
        <td>
          <table>
            <tr>
              <td>
              </td>
              <td width="50px">
                <i id="popup_box_close_icon" class="fa fa-times"></i>
              </td>
              <td id="popup_box_heading">
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr >
        <td id="popup_box_content">

        </td>
      </tr>
    </table>
  </div>

这是打开弹出框的 JS 部分(现在设置了内联样式，因为它是我唯一可以工作的东西):

var content='<div id="popup_box_content_div"><select class="custom_select" id="lang_select" style="border-radius: 0; -webkit-appearance: none; -moz-appearance: none; background-position: right 50%; background-repeat: no-repeat; padding: .5em; padding-right: 1.5em; width: 40%; font-size: 16px;">';
$.each(language_list, function(i, lang){
   content+='<option>';
   content+=lang.showName;
   content+='</option>';
});
content+='</select></div>';
open_popup_box("Choose your preferred Language", content);

Answer 1

去掉 JS 中 'content' 变量中的内联样式。CSS 可能不起作用的唯一原因是，如果 CSS 选择器实际上是某个其他选择器的子项，而您要附加的内容不是该选择器的子项。如果您使用 SCSS，该 CSS 选择器是否嵌套在其他选择器中？如果您使用的是 vanilla CSS，是整个选择器还是它前面有一些其他元素(例如 .foo .custom_select {})？