Comment restituer différents textes en HTML à l'aide de classes intégrées

Question

Je souhaite afficher un texte différent en fonction de la catégorie/catégorie dans laquelle le code est intégré, c'est-à-dire lorsque la catégorie est .category-rabbitmq.

Cela peut changer l'arrière-plan lorsque la catégorie est .category-rabbitmq.

<style>
.category-rabbitmq
{
    image d'arrière-plan : url('https://www.nastel.com/wp-content/uploads/2022/04/nastel_navigator_xpress.png') !important ;
    taille de l'arrière-plan : couverture ;
}
</style>
<themainbody>En savoir plus sur</themainbody><br>

Cela affiche toujours une variable.

<style>
themainbody::après {
  contenu : "RabbitMQ" ;
}
</style>
<themainbody>En savoir plus sur</themainbody><br>

Cependant, cela ne fonctionne pas si l'on affiche uniquement la variable lors de la définition de la catégorie :

<style>
.category-rabbitmq
{
  themainbody::après {
  contenu : "RabbitMQ" ;
}
</style>
<themainbody>En savoir plus sur</themainbody><br>

Pouvez-vous m'aider ?

Answer 1

Vous ne pouvez pas imbriquer de règles dans CSS(Vous pouvezdans SCSS). Il existe un premier brouillon public permettant l'imbrication dans CSS, alors peut-être qu'à l'avenir vous pourrez le faire.

Vous devez donc faire quelque chose comme ceci :

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

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

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

Voir Combinateurs descendants CSS et Combinateurs enfants CSS.