Zepto JS：CSS 不适用于基本的 HTML 模板答案

【问题标题】：Zepto JS : CSS doesn't apply to basic HTML templateZepto JS：CSS 不适用于基本的 HTML 模板
【发布时间】：2017-03-12 05:01:33
【问题描述】：

我试图通过 Zepto JS ajax 调用加载一些 HTML：

// inside $(docuement).ready...
$.get('dist/traffic-lights.html', function(response) {
  $(document.head).append(response);

  // in the page there are some DiVs to full fill..
  $('div.traffic-lights').each(function(idx, elm) {
    $(elm).html($('script#traffic-lights-template').html());
  });
}):

进入 dist/traffic-lights.html 中的模板：

<script type="text/html" id="traffic-lights-template">
  <div class="cars-lights"> ... </div>
  <div class="buttons"> ... </div>
  <div class="pedestrians-lights"> ... </div> 
  <br class="clearfix" />
</script>

一切似乎都还好？内容已加载，但 CSS 规则无法应用于插入的内容！这怎么可能？

【问题讨论】：

知之甚少。请提供minimal reproducible example。我们不知道您使用的是什么 css，也不知道为什么它没有按预期工作。检查浏览器开发工具中的实时 html 和相关样式规则以获取更多线索
CSS 看起来不错...在 Chrome 调试工具中，响应脚本标记看起来像一个 PLAIN 字符串而不是 MARKUP...也许这有帮助？
创建一个重现问题的演示
也许是这个 JSFiddle ？ jsfiddle.net/6k7hogkh
为了理解问题：github.com/hefeust/dexm 这是 JS（未来的 es6）项目，DEXM = Deux Ex Machina Finite State Machine

标签： javascript css html templates zepto

【解决方案1】：

有效地，

我在 CSS 文件中插入了一个错误字符... 如何和什么？可能是我的 IDE 中的危险击键... 擦除并重写了我的 CSS 文件，没有更多麻烦...

感谢 charlietfl，我的问题已解决！

问候。

【讨论】：