html - 如何覆盖CSS分组样式

Question

我正在寻找一种方法来覆盖自举 Accordion 风格。

.panel-group .panel-heading+.panel-collapse .panel-body {
    border-top: 1px solid #ddd;
}

我在 <div class="settings"><div> 中使用 Accordion .因此，我可以使用设置选择器覆盖某些样式。

.settings .panel-heading {
    padding: 0;
    border: 0;
}

但是当我在顶部使用带有分组样式的设置选择器时，它不起作用...

.settings.panel-group .panel-heading+.panel-collapse .panel-body {
    border-top: 1px solid #ddd;
}

这也行不通...

.settings.panel-group .settings.panel-heading+.settings.panel-collapse .settings.panel-

body {
        border-top: 1px solid #ddd;
    }

有人能指出我正确的方向吗？

Answer 1

如果您的标记如下所示:

<div class="settings">
  <div class="panel-group" id="accordion">
  ...
  </div>
</div>

然后你需要在 .settings 和 .panel-group 之间的 css 选择器中有一个空格来指示后代元素。

.settings .panel-group ... { }

如果您的 .settings.panel-group 没有空格，则意味着标记必须是 <div class="settings panel-group"> .