ie11不支持:focus-visible、:is()、:where()、:has()、::placeholder（需用::-ms-input-placeholder替代）、[attr~="val"]波浪号匹配等选择器，整条规则被静默忽略；@supports在ie11中完全无效，须用html条件注释精准加载兼容样式。

IE11不支持的CSS选择器有哪些

IE11原生不支持多个现代CSS选择器，包括：:focus-visible、:is()、:where()、:has()、::placeholder（需::-ms-input-placeholder替代）、[attr~="val"]中的波浪号匹配在部分场景下行为异常。这些不是“偶尔失效”，而是直接被忽略——整条规则不会应用，也不会报错。

用class替代伪类选择器最稳妥

遇到:focus-visible或:has()这类无法降级的语法，不要尝试polyfill或JS模拟，直接改写为显式class控制：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 把button:focus-visible改为button.js-focus-visible，用addEventListener('focusin', ...)手动切换class
• 把article:has(> .warning)拆成两步：先用JS判断子元素是否存在，再给article加.has-warning class
• 所有:is(.a, .b, .c)必须展开为.a, .b, .c，否则IE11整条规则静默丢弃

@supports不能用于IE11兼容性判断

@supports本身在IE11中完全不被识别，任何包裹它的CSS块都会被跳过。它只适用于现代浏览器内的渐进增强，不能当作“兼容开关”使用：

• 错误写法：@supports (selector(:has(*))) { .card { ... } } → IE11里这段整个无效，且现代浏览器也不支持该检测语法
• 正确思路：基础样式写在@supports外层，确保IE11能读取；增强样式放里面，仅现代浏览器生效
• 想精准命中IE11？只能靠HTML条件注释：<!--[if IE 11]><link rel="stylesheet" href="ie11-fix.css"><![endif]-->

伪元素和属性选择器的IE11陷阱

IE11对伪元素和属性选择器的支持有隐藏坑点：

• ::before/::after必须写双冒号（:before单冒号在IE11中虽兼容但属过时写法，建议统一）
• [type="email"]有效，但[type^="text"]（属性开头匹配）在IE11中不支持
• ::-ms-input-placeholder是IE11唯一可用的占位符伪元素，且必须单独声明，不能与::placeholder合并写
• 避免组合过深：div > section + ul li a[href$=".pdf"]这种链式选择器在IE11中解析容错率低，建议拆成独立class

IE11对选择器的解析是“全有或全无”——不支持就彻底跳过整条规则，没有警告，也没有后备。真正可靠的兼容策略不是靠检测或hack，而是从一开始就不依赖它不认识的语法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！