CSS 选择器匹配没有属性 x 的元素[重复]

Question

我正在处理一个 CSS 文件，并发现需要设置文本输入框的样式，但是，我遇到了问题。我需要一个匹配所有这些元素的简单声明：

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

...但与这些不匹配：

<input type='submit' />
<input type='button' />
<input type='image' />
<input type='file' />
<input type='checkbox' />
<input type='radio' />
<input type='reset' />

这就是我想做的：

input[!type], input[type='text'], input[type='password'] {
   /* styles here */
}

在上面的 CSS 中，请注意第一个选择器是

input[!type]

。我的意思是我想选择所有未指定 type 属性的输入框（因为它默认为文本，但

input[type='text']

与它不匹配）。不幸的是，我在 CSS3 规范中找不到这样的选择器。

有谁知道有什么方法可以做到这一点吗？

Answer 1

:not

选择器：

input:not([type]), input[type='text'], input[type='password'] {
    /* style here */
}

支持： Internet Explorer 9 及更高版本

Answer 2

对于更跨浏览器的解决方案，您可以将all输入设置为您想要的非键入、文本和密码的样式，然后另一种样式覆盖单选按钮、复选框等的样式。

input { border:solid 1px red; }

input[type=radio], 
input[type=checkbox], 
input[type=submit], 
input[type=reset], 
input[type=file] 
      { border:none; }

- 或 -

生成非类型化输入的代码的任何部分是否可以为它们提供像

.no-type

这样的类，或者根本不输出？此外，这种类型的选择可以使用 jQuery 来完成。

Answer 3

只是想补充一下，您可以使用 selectivizr 在 oldIE 中使用 :not 选择器：http://selectivizr.com/