css - 同じ CSS クラスが異なる URL で異なる動作をする

Question

私のサイトでは、いくつかの CMS に固執しています。私のcmsには、粘着性のあるレイアウトがあります。今、私のクライアントは2つの異なる外観を必要としています。

したがって、「ホームページ」にいるときはDIVクラスのテストが異なり、他のページにいるときは同じクラスの動作が異なります。

これはホームページ用です.test {いくつかのデータ}

これはその他のページ用です .test { 一部のデータ一部のデータ }

私のURLがホームページの場合はこれを呼び出すという条件をcssで作成する方法はありますか。そうでない場合はこれを呼び出します。

score 1 · Accepted Answer

ページ名など、ボディにカスタムクラスを追加する必要があります。

<body class="home">
  ...
</body>

<body class="my_page">
  ...
</body>

そうすれば、それぞれに異なるスタイルを持つことができます。

.home .test {
  background: red;
}

.my_page .test {
  background: blue;
}

score 0 · Accepted Answer

ホームページを表示している場合は、JavaSctipt を使用して URL を検出し、再度 JavaScript を使用してボディにクラスを追加することができます。次に、この新しいクラスに含まれる要素に個別の CSS スタイルを記述します。

score 0 · Accepted Answer

同じ CSS がページ (URL) ごとに異なる動作をすることはありません。JavaScript を使用してインラインスタイルを変更する方法があります。しかし、スタイルシート全体を変更するとしたら、それは大変なことです。

別の方法としては、URL を検出するだけではなく、さまざまなページのスタイルシートを動的に変更する必要があります。スタイルシートがclasses異なれば、同じでもスタイルが異なる場合があります。

したがって、個別のスタイルシートを作成し、動的に適用します。

score 0 · Accepted Answer

CSS を使用して URL を検出することはできません。そのため、JavaScript を使用して URL を検出する (こののように) か、バックエンドで検出する必要があります。

4 に答える 4