如何覆盖css分组样式

Question

我正在寻找一种覆盖引导手风格的方法。

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

我在<div class="settings"><div>内使用了手风琴。因此，我可以使用设置选择器覆盖某些样式。

.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">。