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

Question

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

echo "<p>" . json_encode($row) . "</p>";

如何使用“竖线”选择器（<p class="fruit-apple something">First</p> <p class="whatever fruit-banana">Second</p> ）来选择|=类？

我尝试了类似下面的内容，但这似乎不起作用。

＆＃13;

＆＃13;

fruit-

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这显然是因为在第二种情况下，类字符串不以<p class="fruit-apple something">First</p> <p class="whatever fruit-banana">Second</p>开头，并且选择器天真地匹配。

Answer 1

|=选择器仅选择指定属性的starting portion。

您需要*=运营商。

p[class*=fruit-]

它将搜索包含短语fruit-x的类，其中x是您想要的任何内容。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;