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"内的{p> div class="Editor-container"会有这样的css： -

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

我该怎么做？

Answer 1

所以你想在.btn-group的{{1}}中设置#menuBarDiv样式？

您可以.Editor-container或.Editor-container > #menuBarDiv > .btn-group::before完成此操作。

差异：我的第一个代码必须遵循您在那里定义的确切层次结构。第二个代码中的层次结构可能有所不同，例如，在＃menuBarDiv和.btn-group之间可能存在另一个id或类，如果它们是直接子节点或父节点则无关紧要。

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

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

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Generate HTML</button>

如何为div下的div编写css哪个特定的id本身在具有特定类的div下？

2 个答案: