CSS 伪类输入:not(disabled)not:[type="submit"]:focus

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9207304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:52:55  来源:igfitidea点击:

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

csscss-selectorspseudo-class

提问by BurebistaRuler

I want to apply some css for inputs elements and I want to do that only for inputs that are not disabled and are not submit type, below css is not working, maybe if someone can explain me how this must be added .

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

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

回答by Wesley Murch

Instead of:

代替:

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

Use:

用:

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

disabledis an attribute so it needs the brackets, and you seem to have mixed up/missing colons and parentheses on the :not()selector.

disabled是一个属性,因此它需要括号,而您似乎在:not()选择器上混淆了/缺少冒号和括号。

Demo: http://jsfiddle.net/HSKPx/

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

One thing to note: I may be wrong, but I don't think disabledinputs can normally receive focus, so that part may be redundant.

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

Alternatively, use :enabled

或者,使用 :enabled

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

Again, I can't think of a case where disabled input can receive focus, so it seems unnecessary.

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

回答by Gavin

Your syntax is pretty screwy.

你的语法很糟糕。

Change this:

改变这个:

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

to:

到:

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

Seems that many people don't realize :enabledand :disabledare valid CSS selectors...

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

回答by PatrikAkerstrand

You have a few typos in your select. It should be: input:not([disabled]):not([type="submit"]):focus

您的选择中有一些错别字。它应该是:input:not([disabled]):not([type="submit"]):focus

See this jsFiddlefor a proof of concept. On a sidenote, if I removed the "background-color" property, then the box shadow no longer works. Not sure why.

请参阅此jsFiddle以获取概念证明。在旁注中,如果我删除了“背景颜色”属性,则框阴影不再有效。不知道为什么。