CSS输入类型选择器 - 可能具有"或"或"非"语法？

Question

如果它们存在于编程中),

如果我有一个包含以下输入的HTML表单:

<input type="text" />
<input type="password" />
<input type="checkbox" />

我想将样式应用于所有type="text"或其中的输入type="password".

或者,我会满足所有输入的位置type != "checkbox".

看起来我必须这样做:

input[type='text'], input[type='password']
{
   // my css
}

有没有办法:

input[type='text',type='password']
{
   // my css
}

要么

input[type!='checkbox']
{
   // my css
}

我环顾四周,似乎没有办法用一个CSS选择器来做到这一点.

当然不是很重要,但我只是一只好奇的猫.

有任何想法吗？

Answer 1

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>

多个选择器

正如文森特所提到的,可以将多个串联:not()在一起:

input:not([type='checkbox']):not([type='submit'])

CSS4 尚未得到广泛支持,它允许多个选择器:not()

input:not([type='checkbox'],[type='submit'])

遗产支持

所有现代浏览器都支持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!
} 

Answer 2

input[type='text'], input[type='password']
{
   // my css
}

这是正确的方法.遗憾的是,CSS不是一种编程语言.