【问题标题】:css selector to match an element without attribute x [duplicate]css选择器匹配没有属性x的元素[重复]
【发布时间】:2010-12-04 17:49:32
【问题描述】:

我正在处理一个 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 规范中找不到这样的选择器。

有谁知道实现这个的方法吗?

【问题讨论】:

  • jQuery 选择器:使用 .not()。 $("[data-plot-id]").not('[data-bean-id]').css({border: '5px solid red'})

标签: css-selectors css


【解决方案1】:

:not 选择器:

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

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

【讨论】:

  • 我试过 img:not[src=""] { visibility: hidden;宽度:0;高度:0; } 但不工作请帮助
  • Anoops,你绝对应该创建一个新问题。
  • 只需要放属性名即可; img : 不是( [ src ] )
【解决方案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 来完成。

【讨论】:

    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-05-23
      • 1970-01-01
      • 2016-03-03
      • 1970-01-01
      • 2016-07-09
      • 2015-06-07
      • 1970-01-01
      • 2016-01-13
      相关资源
      最近更新 更多