如何使用在 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似乎应用于任何 <a>标记，其 href属性的值。

80219 次浏览
小开
最佳答案

下面将匹配定义了 rel属性的任何锚标记:

a[rel]
{
color: red;
}

Http://www.w3.org/tr/css2/selector.html#pattern-matching

更新: 为了解释上面提到的情景@vsync，在注释部分(区分 emtpy/非空值) ，您可以合并 CSS :not 伪类:

a[rel]:not([rel=""])
{
color: red;
}

Https://developer.mozilla.org/en-us/docs/web/css/:not

小开

是的，在 CSS3选择器中有几个 属性选择器属性选择器。

E.g.

[att] 表示具有 att 属性的元素，不管该属性的值是什么。

[ att = val ] 表示一个具有 att 属性的元素，其值正好是“ val”。

[ att ~ = val ] 表示具有 att 属性的元素，该元素的值是一个以空格分隔的单词列表，其中一个单词恰好是“ val”。如果 "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it 永远不会代表任何东西。

[ att ^ = val ] 表示具有 att 属性的元素，其值以前缀“ val”开头。如果“ val”是空字符串，那么选择器 并不代表什么。

[ att $= val ] 表示具有 att 属性的元素，其值以后缀“ val”结束。如果“ val”是空字符串，则选择器执行 不代表任何东西。

[ att * = val ] Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty 字符串，则选择器不表示任何内容。

小开

Should add that if a browser sets an attribute by default you may need to work around. This does not appear to be an issue in "modern" brosers, however, this is an issue I have seen, so be sure to check cross-browser performance.

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

因此，如果你的目标是“任何带有 colspan 属性的 TD”，那么即使 TD 没有 colspan 属性集，比如任何 TD 都是一个单元格，它也会收到 css 样式。IE 小于9将基本上风格他们所有！

唯一值得关注的是那些不能升级到 IE8以上的 XP 用户。

So for Example, I have a group of tables where the content may shift from end to end, leaving anywhere from 1 to 7 cells blank either at the end or the beginning.

我想应用颜色的任何空白单元格在结束或开始使用 colspan 属性。 使用以下命令在 IE 小于9的情况下不起作用

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

... 所有 TD 的将得到样式(有趣，因为条件属性样式应该是优于 IE，但我跑题了...)。

Using the following works across all browsers when I set the value of colspan to 'single' for any solitary cell/TD I wish to include in the styling scheme, however its a 'hack' and will not properly validate...

#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;}

或者，您应该能够更恰当地处理这个问题使用条件样式使用“ if lt IE 9”来覆盖。这将是正确的方法，只要记住在这个过程中你必须隐藏“正确构造的 css”，我认为唯一正确的方法是使用选择性样式表。

Most of us already do that anyway, but regardless, you still do well to consider and test if a browser applies an auto-attribute when it sees none, and how it may handle your otherwise corect syntax for styling on attribute values.

(顺便说一句，colspan 恰好还没有出现在 css 规范中[从 css3开始] ，所以这个例子没有出现验证错误。)


提交答案