CSS3: 未检查的伪类

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

Sitepoint 的引用 没有提到一个，但是这个 什么规格(不管是什么)提到了。

我知道当 :checked和 :not()伪类结合在一起的时候也可以得到同样的结果，但是我仍然很好奇:

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

编辑:

W3c 推荐同样的技术

一个未选中的复选框可以通过使用否定伪类来选中:

:not(:checked)
178210 次浏览
小开

但是，如果您使用: check伪类和可以区分这两种状态的兄弟选择器，则不存在: uncheck 伪类。我相信所有最新的浏览器都支持: check 伪类，你可以从这个资源中找到更多的信息: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

你将得到更好的浏览器支持与 jquery... 你可以使用一个点击函数来检测点击发生时，如果它检查或没有，然后你可以添加一个类或删除一个类，必要的..。

小开

:unchecked没有在选择器或 CSS UI 级别3规范中定义，也没有出现在选择器级别4中。

事实上，W3C 的引用是 取自选择者4规格。由于 选择器4推荐使用 :not(:checked)，因此可以安全地假设没有相应的 :unchecked伪码。浏览器对 :not()和 :checked的支持是相同的，所以这应该不是问题。

这似乎与 :enabled和 :disabled状态不一致，特别是因为一个元素可以启用或禁用 都不是(即语义完全不适用) ，但是似乎没有任何解释这种不一致。

(:indeterminate不计数，因为类似地，一个元素既不能取消检查，也不能检查，也不能不确定，因为语义不适用。)

小开

我觉得你把事情想得太复杂了。一个简单的解决方案是在默认情况下使用未选中的样式设置复选框的样式，然后添加选中的状态样式。

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

我很抱歉提起了一个老的话题，但是我觉得应该有一个更好的答案。

编辑(3/3/2016) :

W3CSpecs 声明 :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选择器将需要使用 border: none;来达到同样的效果。

使用 input[type="checkbox"]进行基本样式设计以减少重复。

对于不希望应用于选中状态的显式未选中样式，请使用 input[type="checkbox"]:not(:checked)。

小开

我处理这个问题的方法是根据条件切换标签的 className。这样，你只需要一个标签，你可以有不同的类为不同的国家... 希望这有所帮助！


提交答案