CSS目标属性包含部分匹配

Question

使用以下CSS，为什么我无法针对接下来的3个锚点进行定位？

a[href~="checkout"] { /* Do something. */ }

<a href="http://shop.mydomain.com/checkout/onepage/">
<a href="https://shop.mydomain.com/checkout/onepage/">
<a href="https://shop.mydomain.com/checkout/onepage/?___SID=S">

在我的CSS选择器中，我做错了什么？我尝试使用~=选择包含单词“checkout”的所有URL的部分匹配。

- Rick Helston

Answer 1

试一下

a[href*="checkout"] { /* Do something. */ }

您需要使用*，它表示包含 - 请参见参考文献。

另外，请勿忘记关闭锚标签。

</a>

使用JSFiddle进行工作。

- freewheeler

---

那么，~= 用于什么？ - Rick Helston

当您需要包含特定单词时，可以使用=。例如，当<a class="link green checkout"></a>时，可以使用a[class="checkout"]。 - freewheeler

Answer 2

a[href~="checkout"]

匹配元素，在一个以空格分隔的单词列表中，其中一个单词恰好为“checkout”。

参见W3C文档选择器Level 3：

[att~=val]

表示具有att属性的元素，其值是由空格分隔的单词列表之一，其中一个单词恰好为“val”。如果“val”包含空格，则永远不会表示任何内容（因为单词由空格分隔）。此外，如果“val”为空字符串，则永远不会表示任何内容。

来源：http://www.w3.org/TR/css3-selectors/#attribute-selectors

如果您想匹配所有attr 包含 string的元素，请使用

[attr*=string]

- connexo