简体繁体 English

样式表的CSS处理顺序

[英]css processing order of stylesheets

原文 2015-12-28 21:34:37 2 3 javascript/ html/ css

I am aware of that styles are applied in cascading order, but starting with me working with the materialize framework I have some problems with cascading my styles. 我知道样式是按层叠顺序应用的，但是从我开始使用物化框架开始，我在层叠样式时遇到了一些问题。 The stylesheets are loaded as I referenced them in my html page: 样式表会按照我在html页面中引用的样式表进行加载：

materialize.css materialize.css
login.css login.css

when I look at how they are applied at the DOM I see that they are not applied in the order they are loaded. 当我查看它们在DOM上的应用方式时，我发现它们没有按照加载顺序应用。

Materialize (line 2587) 实现（第2587行）
login 登录
materialize (line 6701) 实现（6701行）

I assume this behavior is caused by the event driven, non blocking model of Javascript/BrowserEngine. 我认为此行为是由事件驱动的Javascript / BrowserEngine非阻塞模型引起的。

But I need to have a way to reliably override materialize css selectively. 但是我需要有一种方法来可靠地选择性地覆盖物化CSS。 I am pretty sure there are. 我很确定有。 But how? 但是如何？

3 个解决方案

I am aware of that styles are applied in cascading order 我知道样式是按照级联顺序应用的

Correct 正确

they are not applied in the order they are loaded 它们未按加载顺序应用

Correct. 正确。 Cascading order is not "the order they are loaded". 级联顺序不是“它们的加载顺序”。

Well, it is, but that's the 4th and last determining factor which only gets used as a tie-break if the 3 previous factors all come out equal. 是的，但这是第四个也是最后一个决定因素，只有在前三个因素都相等的情况下，才可以用作抢七。

But I need to have a way to reliably override materialize css selectively 但是我需要一种方法来可靠地选择性地覆盖物化CSS

Use earlier factors in the cascade order rules . 在级联顺序规则中使用更早的因子。 The specificity of the selector is normally the one you want to change. 选择器的特异性通常是您要更改的。

A selector's specificity is calculated as follows: 选择器的特异性计算如下：

count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.) 如果声明的来源是“样式”属性而不是带有选择器的规则，则计数为1；否则，则计数为0；否则（= a）（在HTML中，元素的“样式”属性的值是样式表规则。这些规则没有选择器，因此a = 1，b = 0，c = 0和d = 0。）

count the number of ID attributes in the selector (= b) 计算选择器中ID属性的数量（= b）

count the number of other attributes and pseudo-classes in the selector (= c) 计算选择器中其他属性和伪类的数量（= c）

count the number of element names and pseudo-elements in the selector (= d) 计算选择器中元素名称和伪元素的数量（= d）

The specificity is based only on the form of the selector. 特异性仅基于选择器的形式。 In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD. 特别是，即使将id属性定义为“ ID”，形式为[[id = p33]”的选择器也被视为属性选择器（a = 0，b = 0，c = 1，d = 0）在原始文件的DTD中。

Concatenating the four numbers abcd (in a number system with a large base) gives the specificity. 将四个数字abcd（在基数较大的数字系统中）连接起来可得出特异性。

when I look at how they are applied at the DOM I see that they are not applied in the order they are loaded. 当我查看它们在DOM上的应用方式时，我发现它们没有按照加载顺序应用。

Order of loading of CSS resources has nothing to do with specificity of selectors. CSS资源的加载顺序与选择器的特定性无关。 Nothing at all. 没事

But position of <link> s and <style> in the DOM does matter for order of how CSS rules are applied. 但是<link>和<style>在DOM中的位置对于CSS规则的应用顺序确实很重要。

If two selectors have the same specificity then the rule that appeared "later in DOM order and in CSS file" is applied on top of another one. 如果两个选择器具有相同的特异性，则“在DOM顺序和CSS文件中稍后出现”的规则将应用于另一个选择器。

it's not just about stylesheets. 不只是样式表。 it's about selectors. 这是关于选择器的。 .row .col.s3 has higher priority over .search_icon_div . .row .col.s3优先级高于.search_icon_div 。

Read this article about specificity on css-tricks. 阅读有关CSS技巧的特异性的文章。