So rendern Sie mithilfe eingebetteter Klassen unterschiedlichen Text in HTML

Question

Ich möchte basierend auf der Kategorie/Kategorie, in die der Code eingebettet ist, unterschiedlichen Text anzeigen, d. h. wenn die Kategorie .category-rabbitmq ist.

Dies kann den Hintergrund ändern, wenn die Kategorie .category-rabbitmq ist.

<style>
.category-rabbitmq
{
    Hintergrundbild: url('https://www.nastel.com/wp-content/uploads/2022/04/nastel_navigator_xpress.png') !important;
    Hintergrundgröße: Cover;
}
</style>
<themainbody>Lesen Sie mehr über</themainbody><br>

Hier wird immer eine Variable angezeigt.

<style>
themainbody::after {
  Inhalt: "RabbitMQ";
}
</style>
<themainbody>Lesen Sie mehr über</themainbody><br>

Dies funktioniert jedoch nicht, wenn die Variable nur beim Festlegen der Kategorie angezeigt wird:

<style>
.category-rabbitmq
{
  themainbody::after {
  Inhalt: "RabbitMQ";
}
</style>
<themainbody>Lesen Sie mehr über</themainbody><br>

Können Sie helfen?

Answer 1

在CSS中无法嵌套规则（在SCSS中可以）。有一个允许在CSS中嵌套的首个公开工作草案，所以也许将来你会能够。

所以你需要做像这样的事情：

<style>
.category-rabbitmq themainbody::after {
  content: " RabbitMQ";
}
</style>

我不确定.category-rabbitmq元素相对于themainbody有多少级。如果你知道themainbody是.category-rabbitmq的直接子元素，那么你可以更具体地使用子组合器并进行优化：>

<style>
.category-rabbitmq > themainbody::after {
  content: " RabbitMQ";
}
</style>

请参阅CSS后代组合器和CSS子组合器。