利用背景颜色

Question

我目前有一个div位于另一个div内的按钮内，如下所示：

.div1 {
  color: red;
  background: currentColor;
}

button {
  background: green;
}

.span {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
}

<div class="div1">
  <button>
    <span class="span"></span>
  </button>
</div>

另一个问题是我不一定要为两者选择颜色，但要使颜色可以通过继承传递下来。有没有什么方法可以让div 2与div 1颜色相同，但是将按钮保持为不同的颜色？

Answer 1

你可以尝试类似的东西

.div1, .div2 { background-color: tomato }

<div class="div1">
    <button>
        <div class="div2"></div>
    </button>
</div>

但最好避免将div插入按钮

您也可以使用相同的类:(我添加了边框/填充，以便您可视化）

button, div {padding: 10px; border: 2px solid blue;}
.red-bg {background: red;}

<div class="red-bg">
  <button>
    <div class="red-bg">123</div>
  </button>
</div>