Что является эквивалентом «.»CSS селектор для любого атрибута?

Question

Я хотел бы выбрать вещи аналогично тому, как выбираются классы (но я хотел бы использовать другие атрибуты). Таким же образом, что class='item-button item-button-selected' может быть выбрано с .item-button и .item-button-selected.

Answer 1

Эквивалентом селектора класса HTML для любого атрибута является [attribute~=value], что соответствует одному из набора значений, разделенных пробелами:

[data-foo~="a"] {
  color: red;
}

[data-foo~="a"][data-foo~="b"] {
  color: blue;
}

<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b

В случае, если вас беспокоит специфичность (если это случай использования не-CSS , вам не нужно беспокоиться), селекторы атрибутов и селекторы классов одинаково специфичны.