css选择器匹配没有属性x的元素

我正在研究一个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规范中没有我能找到的选择器。

有谁知道一种方法来完成这个?


:不选择

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

支持:在Internet Explorer 9和更高版本中


对于更多跨浏览器的解决方案,您可以按照您想要的方式对所有输入进行样式设置,输入文本和密码,然后使用另一种样式替代无线电,复选框等样式。

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来完成。


只是想补充一点,你可以在oldIE中使用selectivizr:notselector:http://selectivizr.com/

链接地址: http://www.djcxy.com/p/22843.html

上一篇: css selector to match an element without attribute x

下一篇: Can a CSS class inherit one or more other classes?