Использовать цвет фона

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>