如何使用在CSS中具有任何值的属性来定位元素?

我知道我可以针对CSS中具有特定属性的元素,例如:

input[type=text] { font-family: Consolas; } 

但是是否有可能针对具有任何值的属性的元素(除非没有,即当属性没有被添加到元素中)?

大概是这样的:

 a[rel=*] { color: red; } 

其中应该定位在这个HTML中的第一个和第三个<a>标签:

 <a href="#" rel="eg">red text</a> <a href="#">standard text</a> <a href="#" rel="more">red text again</a> 

我认为这是可能的,因为默认情况下, cursor: pointer似乎被应用于任何具有href属性值的<a>标签。

以下将匹配任何定义了rel属性a nchor:

 a[rel] { color: red; } 

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

是在CSS 3select器中有几个属性select器 。

例如

[att]表示具有att属性的元素,无论属性的值如何。

[att = val]表示一个元素的att属性,其值完全是“val”。

[att〜= val]表示具有att属性的元素,其值是以空格分隔的单词列表,其中之一恰好是“val”。 如果“val”包含空格,它将永远不会表示任何东西(因为单词之间用空格分隔)。 另外,如果“val”是空string,它将永远不会代表任何东西。

[att ^ = val]表示具有att属性的元素,其值以前缀“val”开头。 如果“val”是空string,则select器不表示任何内容。

[att $ = val]表示具有att属性的元素,其值以后缀“val”结尾。 如果“val”是空string,则select器不表示任何内容。

[att * = val]表示具有att属性的元素,其值包含至less一个子string“val”的实例。 如果“val”是空string,则select器不表示任何内容。

应该补充说,如果浏览器默认设置了一个属性,你可能需要解决。 这在“现代”大杂烩中似乎不是一个问题,但是,这是我所看到的一个问题,所以一定要检查跨浏览器的性能。

例如,我发现在9之前的IE中,colSpan被设置为表中的所有TD,所以任何一个单元格的隐藏colspan值为1。

因此,如果您的目标是“任何具有colspan属性的TD”,则可以在您的webdoc中应用,即使没有设置colspan属性的td(如任何TD为单个单元格)也将接收css样式。 小于9的IE将基本上风格它们全部!

唯一有理由担心的是所有剩余的XP用户无法升级到IE8以上。

所以举例来说,我有一组表,其中的内容可能会从一个端到另一端,留下1到7个单元格的任何地方在结束或开始空白。

我想使用colspan属性将颜色应用到结束处或开始处的任何空白单元格。 使用下面的将不会在IE不到9

 #my td[colspan] {background-color:blue;} 

…所有的TD将会被devise(有趣的是,条件属性造型在IE中被认为是优越的,但是我离题了…)。

在所有浏览器中使用以下工作,当我设置colspan的值为'single'的任何孤立单元格/ TD我希望包括在造型scheme,但其'黑客',并不会正确validation…

 #my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */ #my td[colspan="2"] {background-color:blue;} #my td[colspan="3"] {background-color:blue;} #my td[colspan="4"] {background-color:blue;} #my td[colspan="5"] {background-color:blue;} #my td[colspan="6"] {background-color:blue;} #my td[colspan="7"] {background-color:blue;} 

或者,您应该能够更适当地解决使用条件样式使用“如果lt IE 9”覆盖的问题。 这将是正确的方法,只要记住在IElt9中必须隐藏“正确构造的CSS”,我认为唯一正确的方法就是select样式表。

我们中的大多数人已经这样做了,但不pipe怎样,如果浏览器在没有看到的情况下应用自动属性,以及它如何处理您的属性值样式的corect语法时,仍然可以考虑和testing。

(顺便说一下,colspan只是碰巧不在css规范中[因为css3],所以这个例子不会引发validation错误。)