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

Question 1

我知道我可以定位CSS中具有特定属性的元素，例如：

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

但是，是否可以将具有任何值属性的元素作为目标（除了什么都没有，即当尚未将属性添加到元素时）？

大致类似：

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

哪个应针对<a>此HTML中的第一个和第三个标记：

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

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

Question 2

以下内容将匹配rel定义了属性的所有锚标记：

a[rel]
{
    color: red;
}

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

更新： 要解决@vsync中提到的情况，在注释部分（区分为空值/非空值），可以合并CSS:not 伪类：

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/：不是

Question 3

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

例如

[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”是空字符串，则选择器不代表任何内容。

Question 4

应该补充一点，如果浏览器默认情况下设置了属性，则可能需要解决。在“现代”浏览器中，这似乎不是问题，但是，这是我所看到的问题，因此请务必检查跨浏览器的性能。

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

因此，如果您要在网络文档中定位“具有colspan属性的任何TD”，即使没有设置colspan属性的td，例如任何TD是单个单元格，也将获得css样式。IE小于9基本上将样式化所有样式！

唯一值得关注的原因是所有其余无法升级到IE8以上版本的XP用户。

因此，例如，我有一组表，其中的内容可能会从一端移到另一端，在末尾或开始处留出1到7个单元格的空白。

我想使用colspan属性在末尾将颜色应用于任何空白单元格。在IE 9或以下的版本中，使用以下命令将无效

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

...所有TD都会被设置样式（由于条件属性样式在IE中优越，所以很有趣，但我离题了...）。

当我将要包含在样式方案中的任何单独单元格/ TD的colspan值设置为“ single”时，在所有浏览器上使用以下作品，但是它是“ 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”，我认为这样做的唯一正确方法是使用选择性样式表。

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

（顺便说一句，[从css3开始，colspan恰好还不在css规范中，因此此示例没有引发验证错误。）