我不是 100% 确定你是如何尝试应用before
确切的......或者你确切想要的 CSS 应该是什么。
要将特定于父规则的格式应用于子(或伪元素),您可以制作一个可重用的参数mixin,它将颜色作为参数,设置背景并添加具有适当颜色的子规则(伪元素) (和其他属性)。
也许是这样的:
.before(@color){
background-color: @color;
&:before {
border-top: 6px solid @color;
bottom: -6px;
}
}
然后你可以为每个类调用 mixin:
div.Tooltip {
cursor: default;
&.Info {
.before(#808080);
} // Info
&.Menu {
.before(#606060);
} // Menu
}
CSS 输出将是:
div.Tooltip {
cursor: default;
}
div.Tooltip.Info {
background-color: #808080;
}
div.Tooltip.Info:before {
border-top: 6px solid #808080;
bottom: -6px;
}
div.Tooltip.Menu {
background-color: #606060;
}
div.Tooltip.Menu:before {
border-top: 6px solid #606060;
bottom: -6px;
}
这现在会将不同颜色的伪元素应用于分配给的不同类Tooltip
。
注意:
如前所述,这应该有效(如果您将content
, width
, height
, 和添加position
到伪元素),但如果我是您,我会修改您的 CSS。div.Tooltip.Info
例如,打电话真的有效吗?你能以一种聪明的方式组合一些选择器吗?但我想我没有看到全貌。
在这里,我添加了一个带有生成的 CSS 的 jsfiddle 演示(我只是添加了一些不同的颜色,导致边框在相同颜色的背景上不可见,并为共享:before
选择器分配了一些必需的属性,以便显示):
...
无论如何,像我建议的那样的 mixin 将是一种优雅的方式,可以在多个位置添加具有特定更改的相同元素。