时间戳

首页 > 解决方案 > 如何为具有相同类名的嵌套 div 设置样式？

css - 如何为具有相同类名的嵌套 div 设置样式？

问题描述

我有这个问题，我嵌套了类名与其父级相同的 div，我希望其样式略有不同。基本上我想要做的是这些 div 嵌套得越深，它们的背景颜色不透明度就越少。所以我的代码看起来像这样

<div class="Folder-container"> //Yellow

  <div class="Folder-container">  //Yellow @ 0.5 opacity 

      <div class="folder">
          <div class="file">File</div>
      </div>

      <div class="folder">
          <div class="file">File</div>
      </div>

  </div>

  <div class="Folder-container"> //Yellow @ 0.5 opacity

      <div class="folder">
          <div class="file">File</div>
      </div>

      <div class="folder">
          <div class="file">File</div>
      </div>

  </div>
</div>

我不能给它们唯一的名称，因为层次结构是动态生成的，并且我的一些函数依赖于这些具有相同类名的 div 以在它们的嵌套级别内实现相同的行为。那么我怎样才能根据他们的水平来设计这些风格呢？

.Folder-container > Folder-container
{
   //set styling
}

如果可能的话？

标签： csshtml

解决方案

诀窍是您无法为容器设置样式，但您需要为其中的文件夹设置样式。否则你会把背景放在背景上，这样你只能让它们更加不透明。通过我在这里写下来的方式，您可以使它们更加透明。

.Folder-container > .folder
{
   background-color: rgba(0,0,0,1);
}

.Folder-container > .Folder-container > .folder
{
   background-color: rgba(0,0,0,.8);
}

.Folder-container > .Folder-container > .Folder-container > .folder
{
   background-color: rgba(255,255,255,.6);
} 

.Folder-container > .Folder-container > .Folder-container > .Folder_Container > .folder
{
   background-color: rgba(255,255,255,.4);
}

推荐阅读