CSS3：未经检查的伪类
我知道有一个官方的CSS3 :checked伪类，但是有一个:unchecked伪类，他们有相同的浏览器支持？
Sitepoint的参考没有提到一个，但是这个whatwg规范 （不pipe是什么）。
我知道当:checked和:not()伪类相结合时，可以达到相同的结果，但我仍然好奇：
input[type="checkbox"]:not(:checked) { /* styles */ }
编辑：
W3C推荐相同的技术
未选中的checkbox可以使用否定伪类来select：
:not(:checked)
:unchecked未在select器或CSS UI级别3规范中定义，也没有出现在select器级别4中。
实际上，来自W3C的引用来自Selectors 4规范 。 由于select器4build议使用:not(:checked) ，所以假设没有相应的:unchecked pseudo是安全的。 浏览器支持:not()和:checked是一样的，所以不应该是一个问题。
这可能看起来与:enabled和:disabled状态不一致，特别是因为一个元素既不能启用也不能被禁用（即语义完全不适用），但是对于这种不一致性似乎没有任何解释。
（ :indeterminate不算数，因为一个元素可以类似地既不被检查也不被检查，也不确定，因为语义不适用。）
我想你正在试图把事情复杂化。 一个简单的解决scheme是在默认情况下使用未经检查的样式对checkbox进行样式设置，然后添加选中的状态样式。
input[type="checkbox"] { // Unchecked Styles } input[type="checkbox"]:checked { // Checked Styles }
我很抱歉提出一个旧的线程，但觉得它可以使用更好的答案。
编辑（3/3/2016）：
W3C规范指出:not(:checked)作为select未选中状态的例子。 但是，这显然是未经检查的状态，只会将这些样式应用于未经检查的状态。 这对于添加仅在未检查状态下需要的样式非常有用，并且如果在input[type="checkbox"]select器上使用，则需要从检查状态中移除样式。 请参阅下面的示例进行说明。
input[type="checkbox"] { /* Base Styles aka unchecked */ font-weight: 300; // Will be overwritten by :checked font-size: 16px; // Base styling } input[type="checkbox"]:not(:checked) { /* Explicit Unchecked Styles */ border: 1px solid #FF0000; // Only apply border to unchecked state } input[type="checkbox"]:checked { /* Checked Styles */ font-weight: 900; // Use a bold font when checked }
不使用:not(:checked)在上面的例子中:not(:checked) :checkedselect器将需要使用border: none; 达到同样的效果。
使用input[type="checkbox"]作为基础样式，以减less重复。
使用input[type="checkbox"]:not(:checked)以获得不想应用于选中状态的显式未检查样式。
没有：未经检查的伪类然而，如果你使用：checked伪类和兄弟select器，你可以区分两种状态。 我相信所有最新的浏览器都支持：checked伪类，你可以从这个资源中find更多的信息： http : //www.whatstyle.net/articles/18/pretty_form_controls_with_css
你会得到更好的浏览器支持与jQuery的…你可以使用点击function来检测点击发生时，如果检查与否，那么你可以添加一个类或删除一个类，如有必要…
<style> input, span { background: red; } :indeterminate, :indeterminate + span { background: limegreen; } </style> </head> <body> <input type="checkbox"> <span>Everything in this paragraph should have a green background.</span> <script type="text/javascript"> document.getElementsByTagName("input")[0].indeterminate = true; </script>
我处理的方式是根据条件切换标签的className。 这样，你只需要一个标签，你可以为不同的州有不同的类…希望有帮助！
