CSS3 :not() selector ignored by IE9

Question

CSS:

input:not([type=submit]):focus,
input:not([type=file]):focus,
textarea:focus {
    background: #f8f8f8;
    -webkit-box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
    box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
    outline-color:transparent;
    outline-style:none;
}

IE9 忽略 input:not([type=file]):focus 并在输入文件焦点上设置其框阴影、背景等样式。

有什么想法吗？

编辑:

如果不支持:为什么 IE9 的样式像上面那样？ 如果支持:为什么 IE9 忽略 :not() ？并像上面那样设计它？

Answer 1

IE9 当然支持:not 选择器- caniuse (如评论中所述)

但是……

您的 CSS 没有按您的想法行事。

在您当前的代码中，第二条规则:

input:not([type=file]):focus

覆盖第一条规则。因此属性将应用于除文件之外的所有输入元素 - 但包括提交 - 以及所有浏览器(不仅是 IE9)

相反，您应该像这样链接选择器:

input:not([type=submit]):not([type=file]):focus, 
textarea:focus {
    background: #f8f8f8;
    -webkit-box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
    box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
    outline-color:transparent;
    outline-style:none;
    color: pink;
}

检查这个 FIDDLE :

...您可以看到类型 submit 和 file 的输入不会获得焦点应用的样式，但是类型按钮的输入将获得焦点应用的样式。

我在 IE9 中测试过它，它工作正常。