CSS 选择器选择连字符后的第二个项目

Question

CSS select 或 [attr|=value] 设计用于 select 完全 "value" 或以 "value-" 开头的项目。这原本是为了让 selection 所有语言不分方言，例如 "en-au", "en-ca", "en-gb", "en-us".

我要找的是 selector 正好是 "value" 的项目，其中包括“-value-”或以“-value”结尾。就我而言，我根本不关心语言代码。

This page 声称有一个 =\ 运算符：

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

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

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

但是，这也会 return 项 "xx-valuevalue"，所以结果并不完美。

我的问题是：是否有另一种方法来编写 CSS select 或者 select 所有具有给定字符串的项目作为连字符分隔列表中的一个项目？

Answer 1

给你：

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

在伪代码中：

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