javascript - 在动态生成的元素中覆盖 css

Question

我正在使用 bootstrap-select，它在 select 之上添加了 div。换句话说，我定义:

<select id="@Html.IdForModel()" 
    name="@Html.NameForModel()" 
    class="selectpicker form-control" 
    data-live-search="true"></select>
...

 var selectBox = $('#@Html.IdForModel()');
 selectBox.selectpicker()

但是在带有开发者工具的页面中我看到:

<div class="btn-group bootstrap-select form-control">
  <button .../>
  <div class="dropdown-menu open" .../>
  <select .../>
</div>

现在我需要这个外部 div 为 "display:block"，这解决了我遇到的一些布局问题。但是btn-group和bootstrap-select都适用"display:block-inline"。

我试过:

• 在单独的 css 文件中为 bootstrap-select 定义我自己的样式
• 将 !important 添加到我的定义中
• selectBox.parent().addClass("select-parent-div");，我的 css 有:.select-parent-div{display: block !important}

唯一有用的是 selectBox.parent().css("display", "block"); 但我真的很想在 css 文件中使用我的样式。为什么 css 不适用，我该怎么办？

Answer 1

您需要检查应用 bootstrap 的样式是否被标记为 !important 在这种情况下 css 将不会考虑您的样式。

我以前遇到过这个问题，有效的技巧是在您的页面中使用相同名称的 bootstrap 创建相同的样式，并根据需要更改属性。