Question

我有一个非常奇怪的问题，我无法弄清楚我的css样式表。我有两个样式表，一个来自cdn，一个缩小然后注入我的本地开发服务器上的index.html（本地）。所以只是为了快速参考，在我的标题中我有这样的东西：

<link rel="stylesheet" href="myCDNStyleSheet.css">
<!-- injector:css -->
<link rel="stylesheet" href="css/localMinifiedStyles.css?1474574347809">
<!-- endinjector -->

因此，只需使用grunt-cssmin和grunt-injector的grunt任务将该样式表与其自己的哈希放在一起。

现在奇怪的是，即使首先加载了myCDNStyleSheet，其中的一些样式也会占据localMinifiedStyles中的样式，所以目前我还是我不得不在{localMinifiedStyles＆＃39;中添加一些!important样式，这对我来说很奇怪。

所以要非常清楚，我的意思是：

myCDNStyleSheet.css有：

  .styleMe {
      margin-left: 5px
  }

和localMinifiedStyles.css有：

 .styleThis {
     margin-left: 12px
 }

渲染的html看起来像：

 <div class="styleMe styleThis">

正在使用margin-left: 5px而不是12.我可以在检查器中看到它们。

交换他们的加载顺序并不能解决这个问题，实际上它会进一步打破它，因为localMinifiedStyles中的某些样式正确地优先使用。

即使在检查chrome devtools中的样式时，我也看到localMinifiedStyles低于正在使用的样式。我无法弄清楚这个原因，咕噜注射是否可能做我不知道的事情？到目前为止，我使用css的假设是最后加载的样式表优先，我在这里遗漏了什么？

Answer 1

我真的不确定是什么导致了你所描述的行为（如果你有完全相同的＆＃34;优先级＆＃34; css规则 - 后者会赢），但是一个简单的方法来解决你的问题是在css定义中复制类。如果您希望styleThis班级接管，您可以使用：

.styleThis.styleThis {
    margin-left: 12px;
}

它是一种黑客，但它适用于最新版本的chrome，firefox和ie。

＆＃13;

.green.green {
  color: green;
}
.red {
  color: red;
}

＆＃13;

<div class="red green">
  This text's color should have been red because the red rule is latter in the CSS, however it will be green due to the <code>.green.green</code> in the css rules.
</div>

＆＃13;

CSS覆盖，首先加载样式表的先例

1 个答案: