使用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中正常工作。

1. 忽略通过pointer-events: none直接单击button
2. 为了让东西有点触手可及，我补充道：
   • aria-hidden="true"到button，这样屏幕阅读器就不会向用户大声朗读
   • CCD_ 8和CCD_ 9div CCD_
   • cursor: pointer到父div，所以它感觉像一个按钮(从用户体验的角度来看(

---

实现这一点的唯一纯CSS方法是将tabindex="0"添加到外部div中，这使我们能够利用其焦点和通用兄弟组合子(~(。我给div一个inlineinline-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>