Html CSS 输入类型选择器 - 可能有“或”或“非”语法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3445533/
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
CSS Input Type Selectors - Possible to have an "or" or "not" syntax?
提问by RPM1984
If they exist in programming),
如果它们存在于编程中），
If I have an HTML form with the following inputs:
如果我有一个包含以下输入的 HTML 表单：
<input type="text" />
<input type="password" />
<input type="checkbox" />
I want to apply a style to all inputs that are either type="text"or type="password".
我想将样式应用于所有输入type="text"或type="password".
Alternatively, I would settle for all input's where type != "checkbox".
或者，我会满足于所有输入的 where type != "checkbox"。
It seems like I to have to do this:
看来我必须这样做：
input[type='text'], input[type='password']
{
// my css
}
Isn't there a way to do:
难道没有办法做到：
input[type='text',type='password']
{
// my css
}
or
或者
input[type!='checkbox']
{
// my css
}
I had a look around, and it doesn't seem like there is a way to do this with a single CSS selector.
我环顾四周，似乎没有办法用单个 CSS 选择器来做到这一点。
Not a big deal of course, but I'm just a curious cat.
当然没什么大不了的，但我只是一只好奇的猫。
Any ideas?
有任何想法吗？
回答by Patrick McElhaney
CSS3 has a pseudo-class called :not()
CSS3 有一个伪类叫做:not()
input:not([type='checkbox']) {
visibility: hidden;
}<p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>
<ul>
<li>text: (<input type="text">)</li>
<li>password (<input type="password">)</li>
<li>checkbox (<input type="checkbox">)</li>
</ul>Multiple selectors
多个选择器
As Vincent mentioned, it's possible to string multiple :not()s together:
正如文森特提到的，可以将多个:not()s串在一起：
input:not([type='checkbox']):not([type='submit'])
CSS4, which is not yet widely supported, allows multiple selectors in a :not()
尚未得到广泛支持的CSS4允许在一个:not()
input:not([type='checkbox'],[type='submit'])
Legacy support
遗留支持
All modern browsers support the CSS3 syntax. At the time this question was asked, we needed a fall-back for IE7 and IE8. One option was to use a polyfill like IE9.js. Another was to exploit the cascade in CSS:
所有现代浏览器都支持 CSS3 语法。在提出这个问题时，我们需要对 IE7 和 IE8 进行回退。一种选择是使用像IE9.js这样的polyfill。另一个是利用 CSS 中的级联：
input {
// styles for most inputs
}
input[type=checkbox] {
// revert back to the original style
}
input.checkbox {
// for completeness, this would have worked even in IE3!
}
回答by codemonkeh
input[type='text'], input[type='password']
{
// my css
}
That is the correct way to do it. Sadly CSS is not a programming language.
这是正确的做法。遗憾的是，CSS 不是一种编程语言。
