css处理样式表的顺序

Question

我知道样式是以级联顺序应用的，但是从我使用materialize框架开始，我遇到了一些级联样式的问题。 样式表在我在html页面中引用时加载：

1. materialize.css
2. login.css



当我查看它们在DOM中的应用方式时，我发现它们没有按照它们的加载顺序应用。

1. 物化（第2587行）
2. 登录
3. 实现（第6701行）



我认为此行为是由Javascript / BrowserEngine的事件驱动，非阻塞模型引起的。

但我需要有办法可靠地有选择地覆盖物化css。我很确定有。但是如何？

Answer 1

  

我知道样式是以级联顺序应用的

正确

  

它们不按照加载顺序应用

正确。级联顺序不是“它们被加载的顺序”。

嗯，确实如此，但这是第4个也是最后一个决定因素，如果之前的3个因素都相等，它们只会被用作抢七局。

  

但我需要有一种方法可以有选择地可靠地覆盖物化css

使用the cascade order rules中的早期因素。 specificity of the selector通常是您想要更改的内容。

  

选择器的特异性计算如下：

     

  
• 如果声明来自，则为1，而不是“样式”属性   带选择器的规则，否则为0（= a）（在HTML中，一个值为   element的“style”属性是样式表规则。这些规则没有   选择器，所以a = 1，b = 0，c = 0，d = 0.）
  
• 计算ID的数量   选择器中的属性（= b）
  
• 计算其他属性的数量   和选择器中的伪类（= c）
  
• 计算元素数量   选择器中的名称和伪元素（= d）
  

     

特异性是   仅基于选择器的形式。特别是，选择器   形式“[id = p33]”被计为属性选择器（a = 0，b = 0，   即使id属性被定义为“ID”，c = 1，d = 0）   源文件的DTD。

     

连接四个数字a-b-c-d（在带有数字的数字系统中）   大基数）给出了特异性。

Answer 2

  

当我看到它们如何应用于DOM时，我发现它们不是   按照加载的顺序应用。

加载CSS资源的顺序与选择器的特异性无关。什么都没有。

但是，<link>和<style>在DOM中的位置对CSS规则的应用顺序很重要。

如果两个选择器具有相同的特异性，那么之后出现的规则＆＃34;稍后在DOM顺序和CSS文件中＃34;被应用于另一个之上。

Answer 3

它不仅仅是关于样式表。它是关于选择者的。 .row .col.s3的优先级高于.search_icon_div。

Read this article about specificity on css-tricks.