Через два CSS-файлы в тот же HTML-файл

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

5 3
css css-specificity

5 ответов:

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

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

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

 #something{
  background-color: #000;
 }

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

16

Это должно сработать, попробуйте.

<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>
2

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

1

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

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

1

Вы имеете в виду 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>
0