具有多个类的CSS管道选择器

Question

假设我有两个具有多个类的元素：

<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>

如何使用“管道”选择器（|=）选择fruit-类？

我已经尝试过类似以下的操作，但这似乎无法正常工作。

<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>

p[class|=fruit] {
    color: red;
}

显然这是因为在第二种情况下，类字符串不是以开头fruit-，并且选择器天真地匹配。

Answer 1

所述|=选择器只选择的起始部分指定的属性的。

您将需要*=运算符。

p[class*=fruit-]

它将搜索包含短语类fruit-x哪里x是你想要的任何东西。

p[class*=fruit-] {
    color: red;
}

<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>
<p class="whatever fruit">Third (No selection)</p>
<p class="fruit noselect">Fourth (No selection)</p>