埋め込みクラスを使用して HTML でさまざまなテキストをレンダリングする方法

Question

コードが埋め込まれているカテゴリに基づいて異なるテキストを表示したいと考えています。つまり、カテゴリが .category-rabbitmq の場合です。

カテゴリが.category-rabbitmqの場合の背景を変更します。

<style>
.category-rabbitmq
{
    背景画像: url('https://www.nastel.com/wp-content/uploads/2022/04/nastel_navigator_xpress.png') !重要;
    背景サイズ: カバー;
}
</スタイル>
<themainbody></themainbody>について詳しく読む<br>

これは常に変数を表示します。

<style>
本体::後 {
  コンテンツ: "RabbitMQ";
}
</スタイル>
<themainbody></themainbody>について詳しく読む<br>

ただし、カテゴリ設定時に変数を表示するだけの場合は機能しません:

<style>
.category-rabbitmq
{
  本体::後 {
  コンテンツ: "RabbitMQ";
}
</スタイル>
<themainbody></themainbody>について詳しく読む<br>

手伝ってもらえますか？

Answer 1

CSS ではルール をネストできません (SCSS では できます)。 CSS でのネストを許可する 最初の公開作業草案 があるため、将来的にはネストできるようになるかもしれません。

したがって、次のようなことを行う必要があります:

リーリー

.category-rabbitmq 要素が themainbody に対して何レベルあるのかわかりません。 themainbody が .category-rabbitmq の直接の子であることがわかっている場合は、より具体的に子コンビネータを使用して最適化できます: > リーリー

CSS 子孫コンビネータ および CSS 子コンビネータ を参照してください。