html - CSS 输入类型选择器 - 可能有 "or"或 "not"语法？

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>

多重选择器

正如 Vincent 提到的，可以将多个 :not() 串在一起:

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

CSS4，即supported in many of the latest browser releases , 允许在 :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!
}