Question

我有一个像这样的css类：

.class {
  border: 1px solid some-color;
}

具有相同类的元素嵌套在该类中;相同的样式规则应该适用，但边框颜色稍深，水平越深。

我怎样才能做到这一点？

编辑：无论级别有多深。也许在javascript中有一种方法？

Answer 1

您可以通过将rgba值应用于background属性来模拟较暗的边框。

这样，当我们加深div级别时，背景会变暗和变暗，因为每个子div都位于其父级背景之上。

enter image description here

<强> FIDDLE

div {
  width: 200px;
  height: 200px;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(50, 120, 10, .2)
}
div div {
  width: 100%;
  height: 100%;
}

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果仍然不清楚，this fiddle应说明正在发生的事情

Answer 2

使用纯css：

<强> DEMO

MARKUP：

<div class=class>
    <div class=class>
        <div class=class>
            <div class=class></div>
        </div>
    </div>
</div>

型：

.class {
  width:200px;
  height:100px;
  padding:20px;
  border: 1px solid rgba(0,0,0,.8);
}
.class *{
  width:100%;
  height:100%;
}
.class .class{
  border: 1px solid rgba(0,0,0,.6);
}
.class .class .class{
  border: 1px solid rgba(0,0,0,.4);
}
.class .class .class .class{
  border: 1px solid rgba(0,0,0,.2);
}

enter image description here

Answer 3

使用SASS，如果您对限制级别数感到满意，可以尝试

.class {
    border-color: blue;
    .class {
        border-color: darken(blue, 10%);
        .class { 
            border-color: darken(blue, 20%);
        }
    }
}

可能有更好的方法是SASS或其他我不了解的预处理器，包括可能将其设置为无限级别。

Answer 4

CSS中没有自动方式，你应该猜测你有多少嵌套元素，根据您的计数使用调色板，并明确定义您的类：

color palette

.class { color: #D4E9FF; }
.class .class { color: #BEDFFF; }
.class .class .class { color: #A8D4FF; }
.class .class .class .class { color: #93C9FF; }
.class .class .class .class .class { color: #7DBEFF; }

Sample jsFiddle Demo

CSS：级别越深，颜色越深

4 个答案: