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

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

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
4
0
19 637
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

2 одинаковых имени класса в 2 отдельных файлах.

Xaisoft 16.12.2008 23:51

Что ж, правда. Но, заблуждение. Каждое новое определение расширяет / отменяет предыдущее. В div "foo" по-прежнему будет красный текст.

Jonathan Lonowski 16.12.2008 23:53

Ах, моя беда, мой образец кода не соответствовал моей мысли. Xaisoft: если названия другие, то у вас все в порядке, вы можете делать все, что хотите. Единственная проблема в том, совпадают ли имена.

scunliffe 17.12.2008 04:51

...that have similar names for the selectors

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

Что ж, тогда ответы на перезапись, которые у вас уже есть, являются правильным ответом.

EBGreen 16.12.2008 23:56
Ответ принят как подходящий

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

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

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

 #something{
  background-color: #000;
 }

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

Имейте в виду, что это происходит только с той же специфичностью - если бы более ранний был #something .blah, это бы выиграло.

iono 28.12.2012 07:47

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

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

Другие вопросы по теме