使用ember.js时，如何使Bootstrap的条带表行样式保持正常工作

Question

Ember将脚本标记注入到dom中，这会阻止引导程序CSS工作。

dom可能看起来像：

<table class="table table-striped">
  <script id="metamorph ...
  <tr ...
  <script id="metamorph ...
  <script id="metamorph ...
  <tr ...
  <script id="metamorph ...
  <tr ...

bootstrap CSS使用nth-child（奇数）选择器选择要突出显示的单元格，这意味着表格没有正确的条纹背景颜色。

我可以用这种情况的正确样式覆盖CSS吗？

Answer 1

您可以使用以下方法覆盖twitter CSS：

/* Override and remove the bootstrap style, as ember breaks it */
.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th {
    background-color: inherit;
}

/* Instead, use nth-of-type selector to effectively ignore the script tags */
.table-striped>tbody>tr:nth-of-type(odd)>td, .table-striped>tbody>tr:nth-of-type(odd)>th {
    background-color: #F9F9F9;
}

Answer 2

或使用：nth-​​child-of-type

很快，ember将不再需要使用脚本标签。有关详细信息，请检查https://github.com/tildeio/htmlbars还有很多工作要做，但这会有助于解决此问题，等等。