css - 同じhtmlファイルで2つのcssファイルを使用する

Question

同じHTMLファイルでセレクターなどに同じ名前のCSSクラスを2つ使用することはできますか？もしそうなら、要素をスタイリングするときに2つをどのように区別しますか？

Answer 1

はい、これは可能です。ドキュメントの HEAD セクションに 2 つの css ファイルを含めるだけです。最初に設定されたスタイルは 2 番目に上書きされるため、次のようにします。
最初のファイル:

 #something{
  background-color: #F00;
  color: #FFF;
 }

そして、2番目のファイルで：

 #something{
  background-color: #000;
 }

次に、#something の背景色は 2 番目のファイルで黒に上書きされますが、2 番目のファイルには何も記述されていないため、色は同じままです。

Answer 2

これはうまくいくはずです、試してみてください。

<style>
  .foo{
    border:1px solid blue;
    color:red;
  }
  .foo{
    border:4px solid orange !important;
  }
</style>
<div class="foo">this will have an orange border and red text (no blue border)</div>

Answer 3

はい、可能です。2 番目のファイルの定義は、最初のファイルの定義を上書きします。この 2 つを区別する方法はありませんが、ファイルに従ってクラス名を先頭に追加します。

Answer 4

...セレクターの名前が似ている

名前が本当に似ていて同一ではない場合、問題はないはずです。

Answer 5

同じクラスの2つの定義を意味しますか? または要素の2つのクラス名?

最初のケース、いいえ。

<style>
  .foo{
    border:1px solid blue;
    color:red;
  }
  .foo{
    border:4px solid orange;
  }
</style>
<div class="foo">this will have an orange border and red text (no blue border)</div>

2番目のケース、はい

<div class="class1 class2">this is valid</div>