Css伪类输入:not(禁用)not:[type ="submit"]:focus

Question

我想为输入元素应用一些css,我想只对未被禁用且不是提交类型的输入执行此操作,下面的css不起作用,也许如果有人可以解释我必须如何添加它.

input:not(disabled)not:[type="submit"]:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 4px 0 #66A3FF;
}

Answer 1

代替:

input:not(disabled)not:[type="submit"]:focus {}

使用:

input:not([disabled]):not([type="submit"]):focus {}

disabled是一个属性所以它需要括号,你似乎在:not()选择器上混合/缺少冒号和括号.

演示:http://jsfiddle.net/HSKPx/

有一点需要注意:我可能错了,但我不认为disabled输入通常可以获得焦点,因此该部分可能是多余的.

或者,使用 :enabled

input:enabled:not([type="submit"]):focus { /* styles here */ }

同样,我无法想到禁用输入可以获得焦点的情况,因此似乎没有必要.

Answer 2

你的语法非常棘手.

改变这个:

input:not(disabled)not:[type="submit"]:focus{

至:

input:not(:disabled):not([type="submit"]):focus{

似乎很多人没有意识到:enabled并且:disabled是有效的CSS选择器......

Answer 3

您的选择中有一些拼写错误.它应该是:input:not([disabled]):not([type="submit"]):focus

请参阅此jsFiddle以获取概念验证.在旁注中,如果我删除了"background-color"属性,则框阴影不再有效.不知道为什么.