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

Question

我在将伪元素应用于单个类方面取得了很大的成功，但是当我只希望在父类也适用时（我们称.foo）它可以工作，则在指定的其他类（在这种情况下为content）：

'bar

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

Answer 1

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

HTML

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

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

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

如果班上有这样的祖先...

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

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

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