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>

利用背景色

1 个答案: