CSS选择以匹配而不属性的元素x(css selector to match an element

2019-07-21 07:50发布

我工作的一个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] 。 我的意思是我想选择其中类型属性未指定(因为它默认为文本,但所有的输入框中input[type='text']不匹配的话)。 不幸的是,在CSS3规范,我能找到没有这样的选择。

有谁知道的一种方式做到这一点?

Answer 1:

:不选择

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

支持:在Internet Explorer 9和更高



Answer 2:

对于更多的跨浏览器解决方案,你可以样式的所有输入你想要的非类型,文字的方式,和密码,然后另一种风格的会覆盖风格收音机,复选框,等等。

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在过时的歌曲没有选择器http://selectivizr.com/



文章来源: css selector to match an element without attribute x