将一个文件中的CSS设置优先于其他文件中的CSS设置

Question

问题很简单。是否可以确保主HTML中包含的两个文件之间的竞争或冲突的CSS属性得到解决，以便有利于两个文件之一中的设置。

如果我有

repartitionAndSortWithinPartitions

和A包含类似

的内容

 <link href="A.css" rel="stylesheet" type="text/css">
 <link href="B.css" rel="stylesheet" type="text/css">

而B包含

body{
  color: #ffffff;
}

我可以以某种方式表明两个文件中存在的每个设置都从A文件中获取其属性吗？

像SASS或LESS这样的引擎是否允许这样做？

Answer 1

CSS代表级联样式表 - 意味着最后的规则将始终否决规则。因此，浏览器将首先解释A.css中的规则并应用它们，然后解释B.css中的规则并应用它们，覆盖A.css中的规则。

如果将规则写入单个文件，也会发生同样的事情。

例如：

body {
   background-color: red;
}

body {
   background-color: blue;
}

将返回background-color蓝色。如果将样式分成多个电子表格或将其写在一个文件中，也会发生同样的事情。

您可以在此处详细了解Cascading and inheritance。

SASS或LESS无法改变这一点，因为它们被编译成CSS - 因此无法用SASS / LESS完成任何无法用CSS做的事情。基本上它们是一个工具，可以帮助您编写更高效的代码，然后编译成CSS。

您可以指定样式表仅在标记中的某些设置（例如，仅在移动设备上）应用，或者您可以使用!important CSS属性来标记您始终要应用的规则。 / p>

Answer 2

在A文件中，也许使用！important？我不知道这是否适用于CSS文件，但你可以试试这个。

body{
  color: #ffffff !important;
}

我听说最好不惜一切代价避免使用它，但它可能适合你。有一个答案here解释了为什么不使用重要的以及何时使用它。