CSS输入类型选择器-可能具有“或”或“非”语法?


101

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

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

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

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

或者,我将满足所有输入的where type != "checkbox"

看来我必须这样做:

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

没有办法做:

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

要么

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

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

当然没什么大不了的,但我只是一只好奇的猫。

有任何想法吗?

Answers:


183

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>


多个选择器

如Vincent所述,可以将多个:not()s 串在一起:

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!
} 

1
好一个!谢谢。CSS3选择器是否完全受支持?(我只真正关心IE7 +,FF3 +,最近的Safari,最近的Chrome)
RPM1984

1
IE9 +和所有其他现代浏览器均支持它。quirksmode.org/css/contents.html#t37
Patrick McElhaney 2012年

12
为了完整起见,如果要执行多个“非”,则使用以下语法:input:not([type ='checkbox']):not([type ='submit'])
Vincent

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.