如何在一個div下編寫一個div的div，這個div本身就是一個具有特定類的div？

Question

我有一些DIV結構：

<div class="row-fluid Editor-container"> 
    <div id="menuBarDiv" class="row-fluid"> 
     <div class="btn-group"> 
      <div class="btn-group" title="Fonts" style="cursor: pointer;"></div> 
      <div class="btn-group" title="Paragraph Format" style="cursor: pointer;"></div> 
      <div class="btn-group" title="Font Size" style="cursor: pointer;"></div> 
     </div> 
    <div> 
</div> 

現在我想寫一個CSS其中： -

div of class="btn-group"內div id="menuBarDiv"內div class="Editor-container"會對CSS這樣的： -

.btn-group::before, .btn-group::after { 
    content: ""; 
    display: inline; 
} 

如何我可以這樣做嗎？

Answer 1

所以你要風格#menuBarDiv.btn-group在.Editor-container？

您可以通過.Editor-container > #menuBarDiv > .btn-group::before或.Editor-container #menuBarDiv .btn-group::before來做到這一點。

區別：我的第一個代碼是必須是遵循的確切層次結構，您在那裏定義。第二個代碼中的層次結構在某種程度上可能有所不同，在#menuBarDiv和.btn-group之間可以有另一個id或class，例如，它們是否是直接的孩子或父母並不重要。

關於主題的更多信息：https://css-tricks.com/child-and-sibling-selectors/

注意：作爲kukkuz已經指出，ID已經具體，確保你真的要使用子選擇。

Answer 2

.Editor-container > #menuBarDiv > .btn-group::before, .Editor-container  > .menuBarDiv > .btn-group::after { 
content: ""; 
display: inline; 
}