CSS3:未经检查的伪类

Question

我知道有一个官方的CSS3 :checked伪类,但是有一个:unchecked伪类,他们有相同的浏览器支持吗？

Sitepoint的参考文献没有提到一个,不过这是什么规范(无论是什么).

我知道当组合:checked和:not()伪类时可以实现相同的结果,但我仍然很好奇:

input[type="checkbox"]:not(:checked) {
    /* styles */
}

编辑:

w3c推荐相同的技术

可以使用negation伪类选择未选中的复选框:

:not(:checked)

Answer 1

:unchecked 未在选择器或CSS UI级别3规范中定义,也未在选择器的级别4中显示.

实际上,W3C的引用来自Selectors 4规范.由于Selectors 4建议使用:not(:checked),因此可以安全地假设没有相应的:unchecked伪.浏览器支持:not()和:checked相同,所以这应该不是问题.

这似乎与:enabled和:disabled状态不一致,特别是因为元素既不能启用也不能禁用(即语义完全不适用),但似乎没有任何解释这种不一致.

(:indeterminate不计算,因为一个元素同样可以不被选中,检查也不确定,因为语义不适用.)

Answer 2

我认为你试图使事情复杂化.一个简单的解决方案是默认使用未选中的样式设置复选框的样式,然后添加选中的状态样式.

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

我为提出一个旧线程而道歉,但觉得它可以使用更好的答案.

编辑(2016年3月3日):

W3C Specs声明这:not(:checked)是选择未经检查状态的示例.但是,这显然是未经检查的状态,只会将这些样式应用于未检查状态.这对于添加仅在未检查状态下需要的样式很有用,如果在input[type="checkbox"]选择器上使用,则需要从已检查状态中删除.请参阅下面的示例以获得说明.

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)上面的示例中使用,则:checked选择器将需要使用a border: none;来实现相同的效果.

使用input[type="checkbox"]for base样式来减少重复.

使用input[type="checkbox"]:not(:checked)您不希望应用于已检查状态的显式未选中样式.

Answer 3

没有 :unchecked 伪类，但是如果您使用 :checked 伪类和同级选择器，您可以区分这两种状态。我相信所有最新的浏览器都支持 :checked 伪类，您可以从此资源中找到更多信息：http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

您将通过 jquery 获得更好的浏览器支持...您可以使用单击功能来检测单击何时发生以及是否选中，然后您可以根据需要添加一个类或删除一个类...