Question

我有一个问题，我嵌套的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
}

是否有可能？

Answer 1

诀窍是您无法设置容器的样式，但是需要设置容器中的文件夹的样式。否则，您会将背景放在背景上，这样只能使它们更加模糊。用我在这里写下的方式可以使它们更加透明。

.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);
}

Answer 2

选择器为.Folder-container>.Folder-container，但是由于您要显示50％黄色而不是100％黄色，因此看起来就像100％黄色。因此，IMO您应在嵌套的div中显示50％的白色： .Folder-container>.Folder-container{background-color:rgba(255, 255, 255, 0.5);}

<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-container"> //Yellow @ 0.75 opacity
        <div class="folder">
            <div class="file">File</div>
        </div>

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

使用以下CSS：

.Folder-container{background-color:yellow;}
.Folder-container>.Folder-container{background-color:rgba(255, 255, 255, 0.5);}
.Folder-container>.Folder-container>.Folder-container{background-color:rgba(255, 255, 255, 0.75);}

Answer 3

.Folder-container{background: yellow}
.Folder-container > .Folder-container{opacity: 0.5}
.Folder-container > .Folder-container .folder{background: #999}

<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的样式？

3 个答案: