Использование двух файлов CSS в одном файле HTML

Question

Можно ли использовать 2 CSS-класса с одинаковым именем для селекторов и т. Д. В одном и том же HTML-файле? Если да, то как вы различаете эти два элемента при оформлении элементов?

Answer 1

Да, это возможно, просто включите два файла CSS в раздел HEAD документа. Любые стили, установленные в первом, будут перезаписаны во втором, так что, скажем, у вас есть это:
Первый файл:

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

А потом во втором файле:

 #something{
  background-color: #000;
 }

Тогда цвет фона для #something будет перезаписан во втором файле черным, но цвет останется прежним, поскольку второй файл ничего об этом не говорит.

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

... которые имеют похожие имена для селекторов

Если имена действительно похожи , а не идентичны , тогда проблем быть не должно.

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>

Второй случай, да

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