CSS输入类型选择器 - 可能有一个“或”或“不”句法？ [英] CSS Input Type Selectors - Possible to have an "or" or "not" syntax?

问题描述

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

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

我想将样式应用于 type =文本或 type =password。

另外，所有输入的类型！=复选框。

好像我必须这样做： {
//输入我的css
}

没有办法做：

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

或

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

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

当然不是什么大问题，但我只是一只好奇的猫。

有什么想法？ / p>

解决方案

CSS3有一个叫做：not（）

$ b

  input：not（[type ='checkbox']）{visibility：hidden;}  

 < p>如果< code>：not（）< / code>支持时，您只会看到复选框。< / p> < UL> < li>文字：（< input type =text>）< / li> < li>密码（< input type =password>）< / li> < li>复选框（< input type =checkbox>）< / li> < / code> 

多个选择器

正如Vincent提到的，可以将多个：not（） s together：

input：not（[type ='checkbox']）： not（[type ='submit']）


CSS4，尚未广泛支持，允许中的多个选择器：not（）
$ $ p $ input：not（[type ='checkbox']，[type ='submit']）


传统支持 h3>

所有现代浏览器都支持CSS3语法。在问这个问题的时候，我们需要为IE7和IE8做一个回退。一种选择是使用像 IE9.js 这样的polyfill。另一个是利用CSS中的级联：

  input {
 //大多数输入的样式
} 
 
 input [type = checkbox] {
 //恢复原始样式
} 
 
 input.checkbox {
 //为了完整性，即使在IE3中也是如此！ 
} 
  

If they exist in programming),

If I have an HTML form with the following inputs:

<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".

Alternatively, I would settle for all input's 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.

Not a big deal of course, but I'm just a curious cat.

Any ideas?

解决方案

CSS3 has a pseudo-class called :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:

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

CSS4, which is not yet widely supported, allows multiple selectors in a :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:

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

这篇关于CSS输入类型选择器 - 可能有一个“或”或“不”句法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！