Question

.navbar-inverse .navbar-search .search-query {
  color: #515151;
  background-color: #ffffff;
  border-color: #111111;
  -o-transition: none;
  transition: none;
}

嗨，我是css的新手并且已经开始使用 bootstrap ，我必须使用类.search-query更改搜索输入框的背景颜色。上面的css代码用于 bootstrap.css 。如果我更改了上述课程中的background-color，它是否也会影响.navbar-inverse and .navbar-search？为什么这个类定义为.navbar-inverse .navbar-search .search-query { }而不仅仅是.search-query {}？这是否意味着三个类具有相同的签名，或者当它位于navbar-inverse and .navbar-search下时将应用.search-query类？

Answer 1

这是一个CSS问题而不是bootstrap个问题。

在CSS中，如果您将2个选择器与空格分开，则其重要性与您推导出的“仅用于导航栏搜索中包含的.search-query”一样。

element1 element2 {
    /*
     * applies to any level of descendance 
     *     <element1><element2></element2></element1>
     * or
     *     <element1><x><element2></element2></x></element1>
     */
}

element1, element2 {
    /*
     * applies to either <element1></element1> or <element2></element2>
     */
}

element1 > element2 {
    /*
     * applies only to direct children <element1><element2></element2></element1>
     */
}

element1 + element2 {
    /*
     * applies only to immediately preceding siblings
     *     <x><element1></element1><element2></element2></x>
     */
}

Answer 2

上面的CSS会影响嵌套在.search-query中的.navbar-search，.navbar-inverse嵌套在.search-query中，因此不会影响未嵌套到这些类容器中的.search-query

但是，更改仅影响{{1}}类，而不影响其他两个类。它只是对选择器更具体。

改变班级签名

2 个答案: