html - 用于内部 div 的 CSS 嵌套选择器

Question

我有以下html结构

 <div class="col-md-6">
    <div class="content-item">
      <span>
      </span>
      <span>
        <div>
          <div>    // OVerride class for this div
           Override class to this div
          </div>
        </div>
      </span>

    </div>
  </div>

我正在寻找一个嵌套类，它将覆盖非常内部 div 的样式。

应该覆盖此 div 的带有注释 Override 类的 div。对于这种情况，嵌套选择器的最佳实践是什么。

Answer 1

如果你确定 html 结构不会改变，你可以使用下面的 CSS 来覆盖div.

请注意，它不会覆盖.div

另外，以后尽量避免使用非常大的嵌套选择器。

.col-md-6>.content-item>span>div>div {
  color: green;
  // Your styles
}

<div class="col-md-6">
  <div class="content-item">
    <span>
      </span>
    <span>
        <div>
          <div> 
           Override class to this div
          </div>
        </div>
      </span>

  </div>
</div>