内部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>