为什么 css 变量会覆盖另一个文件的 css 变量? [英] why css variables override another file's css variable?

问题描述

当我在各种 CSS 文件中定义一个变量，并将这些文件包含在我的 HTML 文件中时，它会覆盖之前的变量.为什么会这样?

假设我有

test1.css

:root {--size-of-font: 5rem;}.标识{字体大小:var(--size-of-font);}

test2.css

:root {--size-of-font: 1.2rem;}.外{字体大小:var(--size-of-font);光标:指针；文本对齐:居中；}

test.html

<link rel="stylesheet" href="test2.css"><div class="外层"><h1 class="logo">Lorem Ipsum</h1><p>Neque porro quisquam est qui doloremipsum quia..."<br>没有人喜欢痛苦本身..."</p>

解决方案

CSS = 层叠 样式表...这意味着定义的顺序很重要，最新的和更具体的优先.如果您在 html 中切换 test1 和 test2，您会得到不同的结果，因为该变量被定义为最近的值.

如果您要求它们不共享此值，我建议您为不同的 .css 文件使用不同的变量名称.

When I define a variable in various CSS files, and include these files in my HTML file, then it overrides the previous variable. Why is it happening?

Let's say that I have

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>

解决方案

CSS = Cascading Style Sheets... this means the sequence of definition matters, the most recent and more specific takes precedence. If you switched test1 and test2 over in your html you'd get a different result because the variable is defined as the more recent value.

I recommend you use a different variable name for your different .css files if you require them to not share this value.

这篇关于为什么 css 变量会覆盖另一个文件的 css 变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！