html - 如何为 div 下的 div 编写 css，哪个特定 id 本身在具有特定类的 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" inside div id="menuBarDiv" inside div class="Editor-container" 将有这样的CSS:-

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

我该怎么做？

Answer 1

所以你想在 .Editor-container 的 #menuBarDiv 中设置 .btn-group 的样式？

你可以通过 .Editor-container > #menuBarDiv > .btn-group::before 或者 .Editor-container #menuBarDiv .btn-group::before.

区别:我的第一个代码必须遵循您在那里定义的确切层次结构。第二个代码中的层次结构可能在某些方面有所不同，例如，#menuBarDiv 和 .btn-group 之间可以有另一个 id 或类，它们是直接子代还是父代并不重要。

有关该主题的更多信息:https://css-tricks.com/child-and-sibling-selectors/

注意:正如 kukkuz 已经指出的那样，id 已经是特定的，请确保您确实必须使用子选择器。