CSS3：未经检查的伪类

Posted 2023-03-06

【中文标题】CSS3：未经检查的伪类

【英文标题】：CSS3 :unchecked pseudo-class

【发布时间】：2012-02-09 09:23:10

【问题描述】：

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

Sitepoint's reference 没有提到一个，但是这个whatwg spec（不管是什么）确实提到了。

我知道将:checked 和:not() 伪类结合起来可以达到相同的结果，但我还是很好奇：

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

编辑：

w3c 推荐相同的技术

可以使用否定伪类来选中未选中的复选框：

:not(:checked)

【参考方案1】：

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

事实上，来自 W3C 的引用是taken from the Selectors 4 spec。由于Selectors 4 建议使用:not(:checked)，因此可以安全地假设没有对应的:unchecked 伪。浏览器对:not() 和:checked 的支持是相同的，所以这应该不是问题。

这可能看起来与:enabled 和:disabled 状态不一致，特别是因为一个元素可以既启用也可以禁用（即语义完全不适用），但是没有出现对此不一致的任何解释。

（:indeterminate 不计算在内，因为一个元素同样不能是未检查、检查或不确定的，因为语义不适用。）

【讨论】：

只是添加到这个答案中，选择 :not(:checked) 在 Chrome 上完美运行，但在 IE 上却不行（在 9 和 11 上测试）。

@Bruno Finger: :checked 和 :not(:checked) 都应该在 IE 上工作，除了它们都同样受到一个错误的影响，即更改检查状态不会更新元素的样式与选中/未选中元素相关。

【参考方案2】：

我认为您试图使事情变得过于复杂。一个简单的解决方案是默认使用未选中样式设置复选框的样式，然后添加选中状态样式。

input[type="checkbox"] 
  // Unchecked Styles

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

我很抱歉提出一个旧帖子，但我觉得它可以使用更好的答案。

编辑（2016 年 3 月 3 日）：

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 选择器将需要使用border: none; 来实现相同的效果。

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

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

【讨论】：

css 选择器还有其他用途/表现力：javascript、自动浏览器测试

这并不总是可行的。特别是表单元素因不允许您通过级联规则将它们恢复为默认外观而臭名昭著。 （尽管为什么有人想在离开另一个薄荷糖时只给已选中或未选中的输入提供自定义外观和感觉，这超出了我的理解。）

另一种不可能的情况：超过 2 个单选按钮。 For example, you may want one style when option#1 is :checked and another when anything else is :checked.解决方案是:not(:checked)

如果您只想要特定样式的样式，为什么不将:first-child、:last-child 或:nth-child 选择器与:checked 结合使用。 :not(:checked) 不会涵盖您指定的情况，除非我误解了您的评论。

@MichaelStramel 将 html 的顺序放入 css 中？不，谢谢

【参考方案3】：

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

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

【参考方案4】：

我处理这个问题的方法是根据条件切换标签的类名。这样一来，您只需要一个标签，就可以为不同的州设置不同的类...希望对您有所帮助！