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

Question

我面临开发自定义单选按钮的任务。为了避免样式问题，我想知道所有可能的预定义状态（例如选中、活动等），以便为它们制定 CSS 规则，以确保我不会出现一些意外的样式。

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

Answer 1

在 W3C选择器级别 3 文档中，有以下可应用于无线电元素的状态伪类：

\n\n

\n
• ：检查过
\n
• ：启用
\n
• ：禁用
\n

\n\n

请记住，无线电元素不能被检查，有必要提及的是存在未检查状态。这些状态成对出现，并且每对中的一个状态始终存在。这样我们现在就得到了 4 种可能的状态（它们可以在下面的思维导图上找到）。

\n\n

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

\n\n

\n
• ：徘徊
\n
• ：积极的
\n
• ：重点
\n

\n\n

它们可以任意组合使用或根本不使用。它们有 8 种可能的组合。将此与 4 个启用-禁用、检查-未检查对相结合，我们得到 32 种可能的陈述，可以在以下思维导图中找到（缩放以查看完整尺寸）：\n\n从选中-未选中节点算起，至少包含两个节点的每一次传递都是一个状态，例如：

\n\n

\n
• 选中-禁用，
\n
• 检查启用焦点，
\n
• 未选中启用悬停活动。
\n

\n\n

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

\n