CSS Input Type Selectors - Possible to have an "or" or "not" syntax?

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?

168430 次浏览
小开 
input[type='text'], input[type='password']
{
// my css
}

这是正确的做法。可惜的是 CSS 不是一种编程语言。

小开
最佳答案

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的填充材料。另一个是利用 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!
}

提交答案