Question

我知道我可以定位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属性的值。

Answer 1

以下内容将匹配定义了a属性的所有rel nchor：

a[rel]
{
    color: red;
}

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

<强>更新为了解释提到的场景@vsync，在评论部分（区分emtpy /非空值），您可以合并CSS :not 伪类：

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

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Answer 2

是的，在CSS 3选择器中有几个attribute selectors。

E.g。

<强> [ATT]       表示具有att属性的元素，无论属性的值是什么。

<强> [ATT = VAL]       表示具有att属性的元素，其值正好为“val”。

<强> [ATT〜= VAL]       表示具有att属性的元素，该属性的值是以空格分隔的单词列表，其中一个正好是“val”。如果   “val”包含空格，它永远不会代表任何东西（因为   单词用空格分隔）。如果“val”是空字符串，那么   永远不会代表什么。

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

<强> [ATT $ = VAL]       表示具有att属性的元素，其值以后缀“val”结尾。如果“val”是空字符串，那么选择器就是   不代表什么。

<强> [ATT * = VAL]       表示具有att属性的元素，该属性的值至少包含子字符串“val”的一个实例。如果“val”是空的   字符串然后选择器不代表任何东西。

Answer 3

应该添加，如果浏览器默认设置属性，您可能需要解决。这似乎不是“现代”brosers中的一个问题，但是，这是我见过的一个问题，所以一定要检查跨浏览器的性能。

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

因此，如果你的目标是“任何带有colspan属性的TD”你在你的webdoc中应用，即使没有colspan属性设置的td，例如任何TD是单个单元格，也会收到css样式。 IE小于9将基本上将它们全部改为样式！

唯一值得关注的是所有剩下的XP用户都无法升级到IE8以上。

因此，对于示例，我有一组表格，其中内容可能从头到尾移动，在结尾或开头留下1到7个单元格的空白。

我想使用colspan属性将颜色应用于结尾或开头的任何空白单元格。使用以下内容将无法在小于9的IE中使用

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

......所有的TD都会被设计风格（很有趣，因为条件属性样式在IE浏览器中应该是优越的，但我离题了......）。

当我将colspan的值设置为'single'时，我希望在样式方案中包含任何单独的单元格/ TD，并使用以下适用于所有浏览器的工作，但它是一个'hack'并且无法正确验证...

#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”来覆盖。这是正确的方法，只要记住你必须在过程中隐藏IElt9中的“正确构造的CSS”，我认为唯一正确的方法是选择样式表。

无论如何，我们大多数人已经这样做了，但无论如何，你仍然可以考虑并测试浏览器是否在看不到时应用自动属性，以及它如何处理属性值样式的其他核心语法。

（顺便说一句，colspan恰好还没有出现在css规范中[截至css3]，所以这个例子不会抛出验证错误。）

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

3 个答案: