时间戳

首页 > 解决方案 > 如何将 CSS 伪元素应用于匹配多个类的元素？

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

问题描述

我在将伪元素应用于单个类方面取得了很大成功，但是当我只希望它在父类（我们会说.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-bearing 元素的 -bearing 元素上触发（考虑.metajelo-ui_前缀）。

在此处输入图像描述

如我们所见，有一个::beforefor .metajelo-ui_resourceMDSource，对应于上面发布的第一个样式，但是，带有url类的突出显示的 span 没有::before显示，并且没有"URL: "在页面上呈现。

如果描述性不够，这里有一个现场演示：https ://labordynamicsinstitute.github.io/metajelo-ui/ （单击添加项目以获取补充产品）- 稍后将很乐意填写更多详细信息。

标签： css

解决方案

如果将类应用于同一元素...

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

推荐阅读