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”的所有网址选择部分匹配。

Answer 1

试试这个

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

您必须使用*，这意味着包含 - 请参阅reference。

另外，不要忘记关闭锚标记

</a>

工作JSFiddle

Answer 2

a[href~="checkout"]

匹配以空格分隔的单词列表中的元素，其中一个正是＆＃34; checkout＆＃34;。

请参阅W3C Docs for Selectors Level 3：

<强> [ ATT 〜= VAL]

表示具有 att 属性的元素，其值为   一个以空格分隔的单词列表，其中一个正是＆＃34; val＆＃34;。   如果＆＃34; val＆＃34;包含空格，它永远不会代表任何东西（因为   单词用空格分隔）。如果＆＃34; val＆＃34;是空字符串，   它永远不会代表什么。

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

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

[attr*=string]

包含部分匹配的CSS目标属性

2 个答案: