不能。伪类如:hover和:disabled不可连写,因状态互斥且语法非法;正确组合需用:not()逻辑排除,如button:not(:hover):not(:disabled)。
伪类能连着写吗?
和
能不能一起用
不能。CSS伪类不支持“链式组合”这种写法,比如
在规范里是非法的——浏览器会直接忽略整个选择器。这不是兼容性问题,是语法错误。CSS伪类本质是互斥的状态描述:一个元素不可能同时处于“悬停中”和“被禁用”状态(
元素不响应
),所以浏览器压根不解析这种组合。
真正能叠加的只有伪元素(如
)和部分可共存伪类(如
内部嵌套),但那是逻辑嵌套,不是链式拼接。
是唯一靠谱的“组合”出口
想表达“既不是 hover 又不是 disabled”,得靠
做逻辑排除,而不是连写。它接受一个完整选择器作为参数,所以可以嵌套、可以多层,但必须合法。
✅ 合法,表示“非悬停且非禁用”的按钮
✅ 合法,排除特定 type 和 focus 状态
✅ 常见用法:只对非 external 类的链接启用 hover 样式
✅ 选中间所有 div,但注意:伪类顺序不影响结果,
内不能写多个伪类(如
❌)
想实现“hover 时禁用态的样式”?别骗自己了
这种需求背后往往混淆了交互逻辑和视觉反馈。真实场景中:
元素不会触发
,所以
永远不生效。如果你看到它“有效”,大概率是用了
之类的手动禁用,而非原生
属性。
立即学习
“
前端免费学习笔记(深入)
”;
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
正确做法是换思路:
用 class 模拟禁用态,比如
,再写
用 JavaScript 监听
,动态加 class,避开 CSS 状态冲突
如果必须用原生
,那就放弃 hover 样式——这是浏览器行为,改不了
性能与兼容性:别在
里塞太重的选择器
本身不慢,但它里面的子选择器会照常计算。比如
,浏览器仍要先匹配所有
,再逐个判断
,开销翻倍。
更隐蔽的坑是兼容性:
支持多参数(如
)是 CSS4 新增特性,IE 完全不支持,Chrome 59+、Firefox 52+ 才稳定。老项目里务必拆成两个
:
复杂选择器越靠近 DOM 树末端,重绘成本越高。真要精确命中,优先用 class 或 data 属性,比堆砌伪类靠谱得多。
:hover:disabled:hover:disableddisabled:hover::before:not():not():not()button:not(:hover):not(:disabled)input:not([type="submit"]):not(:focus)a:hover:not(.external)div:not(:first-child):not(:last-child):not():not(:first-child:last-child)disabled:hoverbutton:disabled:hoverpointer-events: nonedisabled.is-disabledbutton.is-disabled:hovermouseenterdisabled:not():not()ul li:not(li:nth-of-type(2n))li:nth-of-type:not():not(.a, .b):not()/* ❌ 不兼容 IE / 旧 Chrome */
input:not(.error, .success)
/ ✅ 兼容性更好 /
input:not(.error):not(.success)
