html之浏览器中预定义了多少种单选按钮状态

我面临着开发自定义单选按钮的任务。为了避免样式问题，我想知道所有可能的预定义状态(例如选中、事件和其他)，以便为它们制定 CSS 规则以确保我不会有一些意外的样式。

这些状态及其组合是什么？

请您参考如下方法:

在 W3C 中 Selectors Level 3 document有以下状态伪类可以应用于 radio 元素:

• :检查
• :启用
• :禁用

请记住 radio 元素可以不检查，有必要提及存在未检查状态。这些状态成对出现，每对中的一个状态始终存在。这样我们现在得到 4 种可能的状态(它们可以在下面的思维导图中找到)。

确实存在可应用于 html radio 元素的动态伪类:

• :悬停
• :活跃
• :专注

它们可以任意组合使用或根本不使用。它们有 8 种可能的组合。将其与 4 个启用-禁用、选中-未选中对组合，我们得到 32 种可能的状态，可以在以下思维导图中找到(缩放以查看全尺寸): 每一次pass从checked-unchecked节点算起至少包含两个节点就是一个state，例如:

• 检查禁用，
• 选中启用焦点，
• unchecked-enabled-hover-active.

在每个启用的路径附近，都有一张单选按钮状态的图片，因为它现在在 MacOS Sierra 上的 Chrome 浏览器中实现。每个禁用路径只有一张图片——它们对于其他禁用状态都是相同的。总共有 10 张图片代表每个州。使用数字是为了方便。