CSS CSS3：未经检查的伪类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8846075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 :unchecked pseudo-class
提问by Web_Designer
I know there is an official CSS3 :checkedpseudo-class, but is there an :uncheckedpseudo-class, and do they have the same browser support?
我知道有一个官方的 CSS3:checked伪类，但是是否有一个:unchecked伪类，它们是否具有相同的浏览器支持？
Sitepoint's referencedoesn't mention one, however this whatwg spec(whatever that is) does.
Sitepoint 的参考文献没有提到一个，但是这个whatwg 规范（无论是什么）确实如此。
I know the same result can be achieved when the :checkedand :not()pseudo-classes are combined, but i'm still curious:
我知道当:checked和:not()伪类结合时可以获得相同的结果，但我仍然很好奇：
input[type="checkbox"]:not(:checked) {
/* styles */
}
Edit:
编辑：
The w3c recommends the same technique
w3c 推荐了相同的技术
An unchecked checkbox can be selected by using the negation pseudo-class:
:not(:checked)
可以使用否定伪类选择未选中的复选框：
:not(:checked)
回答by BoltClock
:uncheckedis not defined in the Selectors or CSS UI level 3 specs, nor has it appeared in level 4 of Selectors.
:unchecked没有在 Selectors 或 CSS UI level 3 规范中定义，也没有出现在 Selectors 的 level 4 中。
In fact, the quote from W3C is taken from the Selectors 4 spec. Since Selectors 4recommends using :not(:checked), it's safe to assume that there is no corresponding :uncheckedpseudo. Browser support for :not()and :checkedis identical, so that shouldn't be a problem.
事实上，W3C 的引用来自Selectors 4 规范。由于Selectors 4建议使用:not(:checked)，因此可以安全地假设没有相应的:unchecked伪代码。浏览器对:not()和 的支持:checked是相同的，所以这应该不是问题。
This may seem inconsistent with the :enabledand :disabledstates, especially since an element can be neitherenabled nor disabled (i.e. the semantics completely do not apply), however there does not appear to be any explanation for this inconsistency.
这可能看起来与:enabled和:disabled状态不一致，特别是因为一个元素既不能启用也不能禁用（即语义完全不适用），但是似乎没有对这种不一致的任何解释。
(:indeterminatedoes not count, because an element can similarly be neither unchecked, checked nor indeterminate because the semantics don't apply.)
(:indeterminate不算数，因为一个元素同样可以既不是未检查的，也不是检查的，也不是不确定的，因为语义不适用。)
回答by Michael Stramel
I think you are trying to over complicate things. A simple solution is to just style your checkbox by default with the unchecked styles and then add the checked state styles.
我认为你试图把事情复杂化。一个简单的解决方案是在默认情况下使用未选中的样式设置复选框的样式，然后添加选中的状态样式。
input[type="checkbox"] {
// Unchecked Styles
}
input[type="checkbox"]:checked {
// Checked Styles
}
I apologize for bringing up an old thread but felt like it could have used a better answer.
我很抱歉提出一个旧线程，但觉得它可以使用更好的答案。
EDIT (3/3/2016):
编辑（2016 年 3 月 3 日）：
W3C Specs state that :not(:checked)as their example for selecting the unchecked state. However, this is explicitly the unchecked state and will only apply those styles to the unchecked state. This is useful for adding styling that is only needed on the unchecked state and would need removed from the checked state if used on the input[type="checkbox"]selector. See example below for clarification.
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
}
Without using :not(:checked)in the example above the :checkedselector would have needed to use a border: none;to achieve the same affect.
如果不在:not(:checked)上面的示例中使用，:checked选择器将需要使用 aborder: none;来实现相同的效果。
Use the input[type="checkbox"]for base styling to reduce duplication.
使用input[type="checkbox"]for 基础样式来减少重复。
Use the input[type="checkbox"]:not(:checked)for explicit unchecked styles that you do not want to apply to the checked state.
使用input[type="checkbox"]:not(:checked)显式选中的款式，你不希望应用到选中状态。
回答by Jeff Wooden
There is no :unchecked pseudo class however if you use the :checked pseudo class and the sibling selector you can differentiate between both states. I believe all of the latest browsers support the :checked pseudo class, you can find more info from this resource: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css
没有 :unchecked 伪类，但是如果您使用 :checked 伪类和同级选择器，则可以区分两种状态。我相信所有最新的浏览器都支持 :checked 伪类，你可以从这个资源中找到更多信息：http: //www.whatstyle.net/articles/18/pretty_form_controls_with_css
Your going to get better browser support with jquery... you can use a click function to detect when the click happens and if its checked or not, then you can add a class or remove a class as necessary...
您将通过 jquery 获得更好的浏览器支持……您可以使用单击功能来检测单击何时发生以及是否选中，然后您可以根据需要添加一个类或删除一个类……
回答by Daniel Ram
The way I handled this was switching the className of a label based on a condition. This way you only need one label and you can have different classes for different states... Hope that helps!
我处理这个的方式是根据条件切换标签的 className。这样你只需要一个标签，你可以为不同的州设置不同的类......希望有帮助！
