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