CSS覆盖，第一次加载样式表回吐先例

我有一个很奇怪的问题，我不能完全与我的CSS样式表搞清楚。我有两个样式表，一个来自cdn，一个被缩小，然后立即注入我的本地开发服务器的index.html（本地）。所以只是一个快速参考，在我的头我有这样的事情：CSS覆盖，第一次加载样式表回吐先例

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

所以这只是使用咕噜任务与grunt-cssmin和grunt-injector把那个样式与它自己的哈希值。

现在有什么奇怪的是，即使myCDNStyleSheet第一次加载，从它的一些样式在localMinifiedStyles采取precent了风格，所以现在，我不得不戴上风格的一些!important在“localMinifiedStyles”，这对我来说很奇怪。

所以要超清晰，我的意思是：

myCDNStyleSheet.css有：

.styleMe { 
     margin-left: 5px 
    }

和localMinifiedStyles.css有：

.styleThis { 
    margin-left: 12px 
}

而呈现的HTML看起来像：

<div class="styleMe styleThis">

是使用margin-left: 5px，而不是12，我可以看到他们都在检查。

交换他们的加载顺序不解决这个问题，其实它打破它进一步因为有localMinifiedStyles一些风格，正确的优先级更高。

检查中铬devtools样式甚至当我看到localMinifiedStyles是采取precent下面的样式。我无法弄清楚这个原因，难道咕噜咕噜声可能会做一些我不知道的事情？到目前为止，我在使用CSS时的假设是最后加载的样式表需要优先考虑，并且我在这里丢失了一些东西？

来源

2016-09-23 ajmajmajma

没有看到开发者工具，这是很难做到的测试。我确定我在问你已经尝试过的东西，但是你是否尝试过在样式表中稍后检查css，你可能不知道？ – RouthMedia

你是否试图让你的第二种风格更精确？例如，而不是仅仅.styleThis => div.styleThis？ –

你能链接到一个这样的网站吗？我发[小提琴]（https://jsfiddle.net/MrLister/r3cq5xgt/）模拟这一点，但我不能让它表现你所描述的方式。 –

我真的不确定是什么导致了你描述的行为（如果你有完全相同的“优先级”的css规则 - 后者将获胜），但是一个简单的方法来解决你的问题是复制类你的CSS定义。如果你想styleThis类接手你可以使用：

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

这是怎样的一个黑客，但它工作在高达铬，Firefox和IE的最新版本。

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

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

来源

2016-09-24 15:38:38 Dekel

它仍然令我困惑，为什么这不起作用，但是这确实解决了目前的问题。谢谢！ – ajmajmajma

你能提供一个链接到网站吗？它确实可以帮助识别问题... – Dekel

CSS覆盖，第一次加载样式表回吐先例

回答

相关问题