IE3忽略了CSS3:not()选择器

时间:2014-07-29 09:06:56

标签: css css3 internet-explorer-9 css-selectors

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()?和上面的样式一样?

1 个答案:

答案 0 :(得分:5)

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

...您可以看到类型提交和文件的输入不能在焦点上应用样式,但是类型按钮的输入将获得应用于焦点的样式。

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