利用嵌入的类在HTML中呈现不同的文本的方法

Question

我想根据代码嵌入的类别/分类来显示不同的文本，即当类别是.category-rabbitmq时。

当类别是.category-rabbitmq时，这可以改变背景。

<style>
.category-rabbitmq
{
    background-image: url('https://www.nastel.com/wp-content/uploads/2022/04/nastel_navigator_xpress.png') !important;
    background-size: cover;
}
</style>
<themainbody>阅读更多关于</themainbody><br>

这总是显示一个变量。

<style>
themainbody::after {
  content: " RabbitMQ";
}
</style>
<themainbody>阅读更多关于</themainbody><br>

然而，这在仅在设置类别时显示变量时不起作用：

<style>
.category-rabbitmq
{
  themainbody::after {
  content: " RabbitMQ";
}
</style>
<themainbody>阅读更多关于</themainbody><br>

你能帮忙吗？

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子组合器。