почему переменные css переопределяют переменную css другого файла?

Question

Когда я определяю переменную в различных файлах CSS и включаю эти файлы в мой файл HTML, она переопределяет предыдущую переменную. Почему это происходит?

Допустим, у меня есть

test1.css

:root {
    --size-of-font: 5rem;
 }
.logo{
    font-size: var(--size-of-font);
}

test2.css

:root {
--size-of-font: 1.2rem;
}
.outer {
    font-size: var(--size-of-font);
    cursor: pointer;
    text-align: center;
}

test.html

<link rel="stylesheet" href="test1.css">
  <link rel="stylesheet" href="test2.css">

<div class="outer">
    <h1 class="logo">Lorem Ipsum</h1>
     <p>Neque porro quisquam est qui dolorem 
          ipsum quia..."<br>
          "There is no one who loves pain 
          itself..."
     </p>
</div>

Answer 1

Существует 3 способа использования css для веб-сайтов: в файле, теге css или в теге html. Файлы CSS всегда будут иметь приоритет над любым другим форматом CSS. теги имеют приоритет над тегами css в html, которые находятся внизу

вот визуальный

1. CSS-файлы (на первом месте)

3. HTML встроенные стили (наименее важные)

Answer 2

Здесь необходимо рассмотреть две вещи: как пользовательские свойства работают и как они оцениваются с использованием var().

1. Первая часть тривиальна, потому что пользовательское свойство ведет себя так же, как и любое другое свойство. Из спецификации мы можем прочитать:

Пользовательские свойства - это обычные свойства , поэтому они могут быть объявлены для любого элемента, разрешены с помощью , нормальные правила наследования и каскадирования , могут быть сделаны условными с помощью @media и других условных правила, могут быть использованы в атрибуте стиля HTML, могут быть прочитаны или установлены с помощью CSSOM и т. д.

Учитывая это, последнее пользовательское свойство, определенное в вашем случае, будет переопределять первое:

:root {
    --size-of-font: 5rem;
 }
.logo{
    font-size: var(--size-of-font);
}

:root {
  --size-of-font: 1.2rem; /* This one will win !*/
}
.outer {
    font-size: var(--size-of-font);
    cursor: pointer;
    text-align: center;
}

2. При использовании var() нам также необходимо учитывать некоторые правила, подобные определенным в той же спецификации:

На подставьте значение var () в значении свойства:

1. Если пользовательское свойство названо первым аргументом в var () функция испорчена анимацией, а функция var () используется в свойство анимации или одна из его длинных рук, обрабатывать пользовательские свойство как имеющее начальное значение для остальной части этого алгоритма.
2. Если значение пользовательского свойства названо первым аргументом Функция var () - это что угодно, кроме начального значения, замените var () функция по значению соответствующего пользовательского свойства. В противном случае,
3. если функция var () имеет запасное значение в качестве второго аргумента, замените функцию var () запасным значением. Если есть какие-либо Ссылки на var () в резервном варианте также заменяют их.
4. В противном случае свойство, содержащее функцию var (), недопустимо при время вычисленного значения

В нашей ситуации мы рассмотрим (2), потому что .logo унаследует пользовательское свойство, определенное внутри :root со значением 1.2rem (не начальным значением).

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

---

Вот еще один полезный вопрос, где вы можете получить больше деталей и больше примеров: Пользовательское свойство области CSS игнорируется, когда используется для вычисления var во внешней области видимости

Answer 3

Когда вы включаете обе таблицы стилей, все их правила объединяются в одну таблицу стилей. Это означает, что вы вводите конфликт в двух :root правилах CSS с одним и тем же объявлением пользовательского свойства:

:root {
  --size-of-font: 5rem;
}

:root {
  --size-of-font: 1.2rem;
}

Каскадное разрешение означает, что указанное значение настраиваемого свойства --size-of-font равно 1.2rem, а не 5rem. Просто второе объявление переопределяет первое, поскольку оба правила имеют идентичные селекторы.

Это значение 1.2rem затем применяется к обоим случаям использования var(--size-of-font), в .logo и .outer, опять же, потому что две таблицы стилей объединяются в одну. .logo не только видит --size-of-font в своей собственной таблице стилей; он видит все, что разрешено каскадом, с учетом всех объявлений .

Answer 4

            yes it will overwrite ... if i have two class having same name like 


     - test1.css contains 
               .text-color{
               color:red;
           }
     - test2.css contains 
               .text-color{
               color:blue
           }

and it apply in sequence
test1.css
test2.css

so it will apply css which is in test2.css .. t takes latest css if class name are same

Answer 5

CSS = Каскадные Таблицы стилей ... это означает, что последовательность определений имеет значение, самое последнее и более конкретное имеет приоритет. Если вы переключите test1 и test2 в html, вы получите другой результат, потому что переменная определена как более свежее значение.

Я рекомендую использовать другое имя переменной для своих файлов .css, если вы хотите, чтобы они не разделяли это значение.