首页 文章

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

提问于
浏览 次
259

我正在研究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规范中没有这样的选择器 .

有谁知道这样做的方法？

css css-selectors css3

3 回答

  • 416

    :not 选择器

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

    Support:在Internet Explorer 9及更高版本中

    回复于
  • 10

    对于更多的跨浏览器解决方案，您可以按照您希望非键入，文本和密码的方式设置 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完成 .

    回复于
  • 30

    只是想添加到这个，你可以使用selectivizr在oldIE中使用：not selector：http://selectivizr.com/

    回复于

相关问题