css选择器的问题

Question

想要匹配一类class中包含“i-”的元素
class="xxxx i-abc" 匹配
class="i-abc" 匹配
class="aaaai-abc" 不匹配
怎么写比较好呢

Answer 1

二合一

//第二个i前带空格
[class^="i-"],
[class*=" i-"]{
  color: red;
}

Answer 2

[class^='i-']
不知道能不能行，你试试吧

Answer 3

纯css选择器好像做不到

[class^="i-"]{
  color: red;
}

匹配不了第1种

[class*="i-"]{
  color: red;
}

会匹配第3种

只能借助js来筛选，不过这种需求本身就比较奇怪