CSS 选择器选择连字符后的第二个元素

Question

CSS 选择器 [attr|=value] 旨在选择恰好为“value”或以“value-”开头的元素。这最初是为了允许选择所有语言而不考虑方言，例如“en-au”、“en-ca”、“en-gb”、“en-us”。

我正在寻找的是一个元素的选择器，它恰好是“值”，包括“-value-”或以“-value”结尾。就我而言，我根本不关心语言代码。

This page声称有一个 =\operator:

[data-value=|"foo"] {
  /* Attribute value has this in a dash-separated list somewhere */
}

但是我一直无法让它工作。如果我只对 2 项术语的受控列表感兴趣，那么这对我有用:

[attr*=-value][attr$=value]

但是，这也会返回诸如“xx-valuevalue”之类的元素，因此结果并不完美。

我的问题是:是否有另一种编写 CSS 选择器的方法，它会选择所有具有给定字符串的元素作为连字符分隔列表中的一个元素？

Answer 1

给你:

[attr*=-value-], [attr$=-value], [attr=value]

在伪代码中:

Get those containing -value-, those ending with -value, and those exactly equal to value.