bootstrap动态加载的分页栏，样式丢失的问题。

Question

如题，从后台查询分页栏数，动态生成bootstrap的分页栏，append到指定位置后，动态加载的分页栏的css样式丢失。
查询chrome开发者工具，发现动态生成的标签的样式是原始的，而正常渲染的bootstrap分页标签的样式是pagination>li>a 下指定的样式。如何解决？如图。

这是正常bootstrap pagination样式

这是动态加载的标签的样式

Answer 1

你应该吧li添加到li的后面，你添加为了li的子元素。

.pagination>li>a ，必须是直接子元素。

如果按你动态添加的li，需要使用下面的筛选器：

.pagination>li>li>a
或
.pagination li>a

<ul id="pagination">
  <li><a href="#">1111</a></li>
  <li><a href="#">222</a></li>
</ul>

<script>
var ul = document.getElementById("pagination");
var li = ul.getElementsByTagName("li");

//应该这样用
var el = document.createElement("li");
el.innerHTML = '<a href="#">应该这样用</a>';
ul.insertBefore(el, li[1]);

//估计你是这样添加的
var el2 = document.createElement("li");
el2.innerHTML = '<a href="#">估计你是这样添加的</a>';
li[0].appendChild(el2);

</script>

<style>
#pagination>li>a{margin-top:5px;display:block;padding:10px;border-radius:5px;color:#FFF;background:#C00;}

#pagination>li>li>a{margin-top:5px;color:#FFF;background:#090;}

</style>