利用嵌入的類別在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子組合器。