css - 使用 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 ...

引导 CSS 使用 nth-child(odd) 选择器选择要突出显示的单元格，这意味着表格没有正确的条纹背景颜色。

对于这种情况，我可以用正确的样式覆盖 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还有很多工作要做，但这将有助于解决这个问题，还有更多。