私のCSSを1ページだけに適用するにはどうすればいいですか？

私はCSSの学習に取り組んでいますが、私は小さなダムサイトを作っていましたが、何とかしてしまいました。一ページ目。ここで国境ここ私のCSSを1ページだけに適用するにはどうすればいいですか？

<div class="rickmorty"> 
    <p>The rick and morty copypasta</p> 
</div>

を使用して一部のHTMLだ、それはまた、ここに

<div class="box-1"> 
     <p>Test<br />Test again<br /></p> 
</div>

に適用されたHTMLはHTMLが

.rickmorty p{ 
    /*margin:50px; 
    padding:20px;*/ 
    border: 20px #007700 solid; 
    margin:50px; 
    padding:10px; 
    font-weight: bold; 
} 
.box-1{ 
    background-color: #222 
} 
.box-1 p{ 
    font-weight: 80px; 
}

た場合に適用されるCSSですそれ以外のものhere is my github repository of the site

出典

2017-10-27 kittrz

は 'div.box-1 'の祖先として' div.rickmorty'を持っていますか？ – texelate

異なるクラス名を与える必要があります。 2ページ目にしたくない場合は、HTMLでCSSリンクを付ける必要はありません –

特定のページにスタイルを適用して管理しやすいようにするには、そのページに固有のクラス参照を簡単に本文に追加します。

など。次に、あなたのCSSで

<body class="some-page-reference"> 
    <p>Foo bar</p> 
</body>

：

body.some-page-reference p { 
    border: 1px solid red; 
}

それは私が個人的にIDを使用するよりも、この方法では、より良い見つける好みの問題だが。

また、特定のページでのみCSSを使用する場合は、<style>タグを<head>に追加してCSSを配置することができます。ただし、CSSをHTMLとは別のものにすることが望ましい場合があります。

出典

2017-10-27 05:00:38 texelate

以下のような何か実行しているユニークなページにのみ表示される要素へ：CSSに続いて

<div id="unique-box-1" class="box-1"> 
    <p>Test<br />Test again<br /></p> 
</div>

を行います

#unique-box-1 
{ 
    color: red; //just an example 
}

その後、赤色はそのIDで唯一の要素に適用されます。それに応じてコードを調整します。

出典

2017-10-27 04:57:16 slick

クラスの代わりに、div要素のidを与えることを試みる。..

IDの優先度がクラスよりも大きくなります。

例：

<div id="rickmorty"> 
    <p>The rick and morty copypasta</p> 
</div> 

<div class="box-1"> 
     <p>Test<br />Test again<br /></p> 
</div> 

#rickmorty p{ 
    /*margin:50px; 
    padding:20px;*/ 
    border: 20px #007700 solid; 
    margin:50px; 
    padding:10px; 
    font-weight: bold; 
}

出典

2017-10-27 05:01:35 DPS

私のCSSを1ページだけに適用するにはどうすればいいですか？

答えて

関連する問題