css - CSS 选择器的一个奇怪问题

Question

我正在使用 Bootstrap 3，当屏幕 min-width 为 768 时，我想覆盖默认的 margin-bottom，对于属于由#过滤器。所以我做了:

@media screen and (min-width: 768px) {
  #filter .form-inline .form-group {
    margin-bottom: 4px;
  }
}

但它不起作用，即使我在规则中添加了 important!。

但是，在我删除选择器中的 #filter 后它确实有效:

@media screen and (min-width: 768px) {
  .form-inline .form-group {
    margin-bottom: 4px;
  }
}

这真的很奇怪!我确定并测试过 #filter 可以选择表单。谁能告诉我为什么？

Bootstrap 中我想覆盖的代码是:

@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  ...
}

但我只想为 #filter 的形式覆盖它

表单的 HTML 代码是:

<form class="form-inline" id="filter" method="GET" action="<%= url("/blogs", false) %>">
  <div class="form-group">
    <label for="id" class="control-label">ID</label>
    <input class="form-control" id="id" name="id" value="<%= params[:id] %>" />
  </div>
  <div class="form-group">
    <label for="user_id" class="control-label">UID</label>
    <input class="form-control" id="user_id" name="user_id" value="<%= params[:user_id] %>" />
  </div>

  ...

  <button type="submit" class="btn btn-default">Filter</button>
</form>

Answer 1

您使用了错误的选择器 #filter .form-inline。这意味着 .form-inline 是 #filter 的子级，这是不正确的。

您需要的是 #filter.form-inline，它是一个多重选择器。参见 Multiple Class / ID and Class Selectors