Question

我使用Bootstrap 3并希望在屏幕margin-bottom为768时覆盖默认min-width，对于属于由#filter标识的表单的内联表单组。所以我做了：

@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

关于CSS选择器的一个奇怪问题

1 个答案: