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 selector 做错了什么？我正在尝试 select 使用 ~= 对所有包含单词 "checkout."

的 URL 进行部分匹配

Answer 1

试试这个

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

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

还有，别忘了关闭锚标签

</a>

工作JSFiddle

Answer 2

a[href~="checkout"]

匹配以空格分隔的单词列表中恰好是 "checkout".

的元素

请参阅选择器级别 3 的 W3C 文档：

[att~=val]

Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.

Source: http://www.w3.org/TR/css3-selectors/#attribute-selectors

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

[attr*=string]

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

CSS Target Attribute Containing Partial Match

html

css

match

selector

partial