使用 css 或 tailwind 改变按钮的颜色

Question

我试图在单击主按钮时更改按钮的颜色，一种颜色正在改变为什么其他按钮的颜色没有改变，是因为它在主按钮之外吗<div>我如何实现它，没有删除任何 div.

button.one:focus~div.two {
  background-color: rgba(185, 28, 28, 1);
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />


<div>

<button class="one   bg-red-400 font-bold px-4 py-4 rounded-lg">MAIN BUTTON</button>

<div class="two bg-blue-400 font-bold  px-4 py-4 rounded-lg">RED
</div>

</div>

<div class="two bg-blue-400 font-bold  px-4 py-4 rounded-lg">MAKE THIS RED TOO</div>

Answer 1

编辑

在 Chrome 中，button 正在点击 ，而父 div 没有获得焦点。我对此做了一些调整，它现在可以在 Chrome.

中正常工作了

忽略通过 pointer-events: none 对 button 的直接点击。
为了让事情更容易理解，我补充说：
- aria-hidden="true" 到 button，这样屏幕阅读器就不会大声朗读给用户。
- aria-label="MAIN BUTTON" 和 role="button" to the parent div, so that screen readers can treat the div` 就像一个按钮。
- cursor: pointer 到父级 div，这样感觉就像一个按钮（从用户体验的角度来看）。

唯一纯粹的 CSS 方法是将 tabindex="0" 添加到外部 div，这让我们可以使用它的焦点和通用兄弟组合器（~ ) 对我们有利。我给 div 一个 ~~inline~~ inline-block 显示，这样可点击区域就是其子内容的确切宽度。

div[tabindex="0"] {
  display: inline-block;
  outline: none;
  cursor: pointer;
  z-index: 1;
}

div:focus .two,
div:focus~.two {
  background-color: rgba(185, 28, 28, 1);
}

div[tabindex="0"] > button {
  pointer-events: none;
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />


<div tabindex="0" role="button" aria-label="MAIN BUTTON">

  <button aria-hidden="true" class="one bg-red-400 font-bold px-4 py-4 rounded-lg">MAIN BUTTON</button>

  <div class="two bg-blue-400 font-bold  px-4 py-4 rounded-lg">RED
  </div>

</div>

<div class="two bg-blue-400 font-bold  px-4 py-4 rounded-lg">MAKE THIS RED TOO</div>

使用 css 或 tailwind 改变按钮的颜色

Change color of button using css or tailwind

html

css

tailwind-css