Bagaimana untuk menghasilkan teks yang berbeza dalam HTML menggunakan kelas terbenam

Question

Saya mahu memaparkan teks yang berbeza berdasarkan kategori/kategori kod dibenamkan, iaitu apabila kategori itu ialah .category-rabbitmq.

Ini boleh menukar latar belakang apabila kategori ialah .category-rabbitmq.

<style>
.kategori-rabbitmq
{
    imej latar belakang: url('https://www.nastel.com/wp-content/uploads/2022/04/nastel_navigator_xpress.png') !penting;
    saiz latar belakang: penutup;
}
</style>
<themainbody>Baca lebih lanjut mengenai</themainbody><br>

Ini sentiasa memaparkan pembolehubah.

<style>
themainbody::selepas {
  kandungan: "RabbitMQ";
}
</style>
<themainbody>Baca lebih lanjut mengenai</themainbody><br>

Walau bagaimanapun, ini tidak berfungsi apabila hanya memaparkan pembolehubah apabila menetapkan kategori:

<style>
.kategori-rabbitmq
{
  themainbody::selepas {
  kandungan: "RabbitMQ";
}
</style>
<themainbody>Baca lebih lanjut mengenai</themainbody><br>

Bolehkah anda membantu?

Answer 1

Anda tidak boleh menyusun peraturan dalam CSS(Anda bolehdalam SCSS). Terdapat draf kerja awam pertama yang membenarkan bersarang dalam CSS, jadi mungkin pada masa hadapan anda akan dapat melakukannya.

Jadi anda perlu melakukan sesuatu seperti ini:

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

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

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

Lihat Penggabung Keturunan CSS dan Penggabung Anak CSS.