html - 利用背景颜色

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 的颜色相同，但将按钮保持为不同的颜色？

标签： htmlcss

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>