是否有缺少属性的元素的CSS选择器?

时间:2011-08-23 19:10:50

标签: html css css-selectors

我知道css规则可以定位属性值指定的元素,例如:

input[type="text"] {}

我可以制定一个针对省略某个属性的元素的规则吗?例如,我可以定位缺少href的元素或未指定类型的元素吗?

5 个答案:

答案 0 :(得分:76)

您可以遵循以下模式:

a:not([href])
input:not([type])

attribute selector用于选择具有指定属性的元素。

所有现代浏览器和IE9 +都支持

:not,如果你需要IE8或更低的支持,那你就不幸了。

答案 1 :(得分:1)

对于链接,您只需使用:

a { color: red; }
a:link { color: green; }

小提琴:http://jsfiddle.net/ZHTXS/不需要javascript。

对于表单属性,请使用上面提到的not属性模式input:not([type]),如果您需要支持旧版本的IE,我可能会添加一个类并使用与条件注释链接的IE特定样式表。 / p>

答案 2 :(得分:1)

您始终可以为a和href设置不同的样式

检查一下: http://jsfiddle.net/uy2sj/

答案 3 :(得分:1)

唯一适用于我的解决方案是将a:link { }放在我的代码中。

我也尝试过

a:not([href]) input:not([href=""]) input:not([href~=""])

但是对于具有多个标签作为标准代码块的 .scss文件(不是我的主意),这是唯一的解决方案。

答案 4 :(得分:-5)

这个简单的答案。

没有。

如果您希望我提供该解决方案,您可以通过JavaScript完成吗?

但是CSS Hack

(但是,我只想到了CSS的“hacky”方式)..

采取这种情况......您希望任何没有href的<a>标签都显示为红色。

例如,您可以假设您将保留的唯一属性是:

  • ALT
  • 标题
  • HREF
  • 目标 等

>可以为锚标记创建全局规则。 例如

a {
 color: red;
}

然后,您只需创建一个规则,该规则将在您声明的每个属性的声明之后覆盖此全局规则。

所以你会有

a[href] {
  color: blue;
}

现在您将知道任何缺少href的标签都是红色的。

最初提出的问题,

  

我可以制定一个针对省略某个属性的元素的规则吗?

不,你不能!没有跨浏览器,目标 /选择使用CSS省略属性的元素的方式。因此,为什么我觉得我提出的解决方案是一个黑客攻击,因为它实现了问题所针对的问题。