CSS3:未经检查的伪类

2022-10-28前端开发问题
5

本文介绍了CSS3:未经检查的伪类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

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

I know there is an official CSS3 :checked pseudo-class, but is there an :unchecked pseudo-class, and do they have the same browser support?

Sitepoint 的参考资料 没有提到,但是这个 whatwg 规范(不管是什么)的作用.

Sitepoint's reference doesn't mention one, however this whatwg spec (whatever that is) does.

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

I know the same result can be achieved when the :checked and :not() pseudo-classes are combined, but i'm still curious:

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

w3c 推荐相同的技术

The w3c recommends the same technique

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

An unchecked checkbox can be selected by using the negation pseudo-class:

:not(:checked)

推荐答案

:unchecked 没有定义在 Selectors 或 CSS UI level 3 specs 中,也没有出现在 Level 4 Selectors 中.

:unchecked is not defined in the Selectors or CSS UI level 3 specs, nor has it appeared in level 4 of Selectors.

事实上,W3C 的引用取自 Selectors 4 规范.由于 Selectors 4 建议使用 :not(:checked),因此可以安全地假设没有对应的 :unchecked 伪.:not():checked 的浏览器支持是相同的,所以这应该不是问题.

In fact, the quote from W3C is taken from the Selectors 4 spec. Since Selectors 4 recommends using :not(:checked), it's safe to assume that there is no corresponding :unchecked pseudo. Browser support for :not() and :checked is identical, so that shouldn't be a problem.

这似乎与 :enabled:disabled 状态不一致,尤其是因为一个元素既不启用也不禁用(即语义完全不适用),但是对于这种不一致似乎没有任何解释.

This may seem inconsistent with the :enabled and :disabled states, especially since an element can be neither enabled nor disabled (i.e. the semantics completely do not apply), however there does not appear to be any explanation for this inconsistency.

(:indeterminate 不计算在内,因为一个元素同样不能是未检查、检查或不确定的,因为语义不适用.)

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

这篇关于CSS3:未经检查的伪类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

缩放背景图像以适合 ie8 窗口
Scale background image to fit ie8 window(缩放背景图像以适合 ie8 窗口)...
2024-04-19 前端开发问题
11

IE7 (IETEster) 中的@fontface 无法正常工作
@fontface in IE7 (IETEster) not working properly(IE7 (IETEster) 中的@fontface 无法正常工作)...
2024-04-19 前端开发问题
9

Safari 5.1 打破 CSS 表格单元格间距
Safari 5.1 breaks CSS table cell spacing(Safari 5.1 打破 CSS 表格单元格间距)...
2024-04-19 前端开发问题
3

如何使用 `on()` 委托 `hover()` 函数
How to delegate `hover()` function by using `on()`(如何使用 `on()` 委托 `hover()` 函数)...
2024-04-19 前端开发问题
17