Css 伪类 input:not(disabled)not:[type="submit"]:focus

Posted 2023-03-06

【中文标题】Css 伪类 input:not(disabled)not:[type="submit"]:focus

【英文标题】：Css pseudo classes input:not(disabled)not:[type="submit"]:focus

【发布时间】：2012-03-01 17:07:38

【问题描述】：

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

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

【参考方案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 */ 

再次，我想不出禁用输入可以接收焦点的情况，因此似乎没有必要。

【讨论】：

:not([disabled]) 是一种非常冗长的写法 :enabled developer.mozilla.org/en-US/docs/Web/CSS/:enabled

@Adria 不适用于 的我。有一个 并且必须专门使用 :disabled 选择器。 FF65。

由于某种原因 ":enabled" 在我的 ie 11 中不起作用

使用:not([disabled])VS. 有什么区别吗？ :not(:disabled) ?

没有也许。 disabled 元素无法获得 focus 状态。既不通过 CSS 也不通过 JS。

【参考方案2】：

你的语法很古怪。

改变这个：

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

到：

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

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

【讨论】：

为什么不进一步缩短为input:enabled:not([type="submit"]):focus？

【参考方案3】：

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

请参阅此jsFiddle 以获得概念证明。在旁注中，如果我删除了“背景颜色”属性，那么框阴影将不再起作用。不知道为什么。