變遷類signiture

Question

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

您好，我是新來的CSS並已開始使用引導，我必須要改變一個搜索輸入框的背景顏色與.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個選擇符，其含義與您推斷的「僅適用於包含在navbars搜索中的.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-inverse，因此不會影響.search-query未嵌套到那些類容器一個.navbar-search。

但是，更改僅影響.search-query類，而不影響其他兩個類。這只是爲了更具體地瞭解選擇器。