CSS3：未经检查的伪类

108

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

Sitepoint的参考文献未提及任何内容，但是此whatwg规范（无论是哪种内容）都做了提及。

我知道将:checked和:not()伪类结合使用时可以达到相同的结果，但是我仍然很好奇：

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

编辑：

w3c推荐相同的技术

可以通过使用否定伪类来选择未选中的复选框：
:not(:checked)

css css-selectors pseudo-class

— 网站设计者
source

104

:unchecked 未在“选择器”或CSS UI 3级规范中定义，也未在“选择器”的4级中出现。

实际上，W3C的报价来自Selectors 4规范。由于Selectors 4建议使用:not(:checked)，因此可以安全地假设没有相应的:unchecked伪指令。浏览器对:not()和的支持:checked是相同的，因此这不应该成为问题。

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

（:indeterminate不计算在内，因为元素同样不适用，因为语义不适用，因此元素既不能取消选中，选中也不能不确定）。

— BoltClock
source

只是为了增加这个答案，选择：not（：checked）可以在Chrome上完美运行，但不能在IE上（9和11进行测试）。

— 布鲁诺·芬格

@Bruno Finger：：checked和：not（：checked）都可以在IE上运行，除了它们均受到错误的影响（更改更改后的状态不会更新相对于已选中/未选中的目标元素的样式）元件。

— BoltClock

35

我认为您正在尝试使事情复杂化。一个简单的解决方案是，默认情况下，仅使用未选中样式设置复选框的样式，然后添加选中状态样式。

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

我为提出旧线程表示歉意，但觉得可以使用更好的答案。

编辑（3/3/2016）：

W3C规范指出，: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进行基本样式设计以减少重复。

使用input[type="checkbox"]:not(:checked)来表示不想应用到选中状态的显式未选中样式。

— 迈克尔·斯特拉梅尔
source

css选择器还有其他用途，但它很有用/富有表现力：javascript，自动浏览器测试

— nruth 2015年

2

这并不总是可能的。表单元素尤其臭名昭著，因为它不允许您通过级联规则将其还原为默认外观。（尽管为什么有人会只给选中或未选中的输入提供自定义外观，而

— 又不

另一种不可能的情况：两个以上的单选按钮。例如，当选项＃1被：checked时，您可能想要一种样式；而当其他东西被：checked时，您可能想要另一种样式。解决的方法是:not(:checked)

— Navin

如果你想只希望那些特定的风格，为什么不使用:first-child，:last-child或:nth-child与组合选择:checked。:not(:checked)除非我误解了您的评论，否则不会涵盖您指定的情况。

— Michael Stramel 2015年

@MichaelStramel将HTML的顺序放到CSS中？不，谢谢

— inetphantom

3

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

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

— 杰夫·伍德
source

-2

我处理此问题的方式是根据条件切换标签的className。这样，您只需要一个标签，就可以针对不同的状态使用不同的类...希望对您有所帮助！

— 丹尼尔·拉姆（Daniel Ram）
source