Css伪类输入：not（禁用）not：[type =“submit”]：focus

Question

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

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”属性，则框阴影不再有效。不知道为什么。