如何将CSS伪元素应用于匹配多个类的元素？

Question

我已经成功地将伪元素应用于单个类，但是当我只希望它在父类（我们称.foo）也适用的情况下起作用时，content不能在指定的其他类（在这种情况下为'bar）之前应用：

.foo .bar:before {
  content: "URL: ";
}

有什么办法可以做到这一点？

更新

实际示例：

.metajelo-ui_resourceMDSource:before {
  content: " Resource Metadata Source ";
  font-weight: bold;
}


/* FIXME: this is not working for some reason: */
.metajelo-ui_resourceMDSource.metajelo-ui_url:before {
  content: "URL: ";
}

这个想法是:before应该在任何一个带有url的元素上（带有resourceMDSource前缀的元素）上触发。

我们可以看到，.metajelo-ui_有一个::before，与上面发布的第一个样式相对应，但是，带有.metajelo-ui_resourceMDSource类的突出显示范围没有{{ 1}}，并且页面上没有呈现url。

如果这还不够说明性，请观看以下实时演示：https://labordynamicsinstitute.github.io/metajelo-ui/（单击“补充产品”的添加项目）-稍后将乐意填写更多详细信息。

Answer 1

如果将类应用于相同的元素...

HTML

<div class="foo bar"></div>

然后您的CSS应该看起来像这样...

.foo.bar:before { [rules here] }

如果这个班级是在这样的祖先上...

<div class="foo">
    <div class="bar"></div>
</div>

然后您的CSS应该看起来像这样（类之间的空格）...

.foo .bar:before { [rules here] }

Answer 2

只需删除.foo和.bar之间的空格以选择多个类别（元素是.foo也是.bar）。

代码如下：

.foo.bar:before {
  content: "URL: ";
}

<p class="bar alo">bar without foo</p>
<p class="bar foo">bar with foo</p>