Question

我知道有一个正式的CSS3:checked。页: 1 伪装阶级,他们是否有同样的浏览器支持?

http://tt.sitepoint.com/cs/pseudoclass-checked”rel=“noreferer”> 站点参考资料但是,这只字不提:whatwg spec。 (无论是什么)都是这样做的。

我知道,如果将<代码>:checked和:not( pseudo-classes合并起来,但i m 仍然可治愈:

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

<><>Edit>:

第3条

可通过使用否定式假象选择一个不受控制的检查箱:
:not(:checked)

Answer 1

<代码>:unchecked is not defined in the Selectedors or CSS UI 3 specs, nor has it listed in level 4 of selectedors.

事实上,W3C的引语是:Selectors 4建议使用:not(:checked),因此可以安全假设没有相应的:unchecked. pseudo。浏览器对<代码>的支持:和:checked相同,因此,斜体为问题。

这似乎不符合<条码>:可读<>/代码>和<条码>:可拆卸<>/代码>的规定,特别是由于某一要素可以是_neither<>_em>所准许或残疾(即完全不适用语义),但似乎没有解释这种不一致之处。

(:indeterminate does not count, because an element can similarly be neither unchecked, checked nor indeterminate because the semantics don t apply.)

Answer 2

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
}

我很抱歉,要bringing起旧的read子,但感觉到,它本可以采用更好的答案。

EDIT (3/3/2016):

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.

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) in the example above:checked 选择人必须使用<条码>边界:无;以达到同样效果。

利用<条码>输入[类型=“盒式”]进行基础打字以减少重复。

使用<条码>输入[类型=“盒式”]:不适用(:打字)。

Answer 3

但是,如果你使用:粉碎板和纤维选择,你可以区分两国。我认为,所有最新的浏览器都支持:粉碎板的花板,你可以从这一资源中找到更多的信息:

你们会得到更好的浏览器支持。 ......你可以使用点击功能在点击发生时发现,如果被检查或没有,那么你可以增加一个班级或在必要时去一个班级......

Answer 4

我处理此事的方式是按某种条件改变标签的类别。这样,你就只需要一个标签,你可以有不同的班级。希望帮助!

友情链接