css优先级权重计算规则_什么是CSS级联规则

css优先级权重计算规则

As you know, we use CSS also known as cascading stylesheets to style our websites, but what does truly cascading mean? Of course, the literal meaning of this word is a waterfall pattern.

如您所知，我们使用CSS(也称为级联样式表)来样式化我们的网站，但是真正的级联是什么意思呢？ 当然，这个词的字面意思是瀑布式的。

In fact, CSS cascade is one of the most powerful parts of CSS; However, if you do not understand the meaning of it, it can also be a problem for you. Anyone with experience working on a large website is definitely faced with the following questions:

实际上，CSS级联是CSS最强大的部分之一。 但是，如果您不了解它的含义，那么对您来说也可能是个问题。 拥有在大型网站上工作的经验的人肯定会面临以下问题：

Why does some CSS property not work?

为什么某些CSS属性不起作用？

They have probably resorted to using !important to solve this problem, as well.

他们也可能使用!important来解决此问题。

To prevent such things from happening, it is better to go back a little to the basics and try to understand them conceptually.

为了防止此类情况的发生，最好再回顾一些基础知识并尝试从概念上理解它们。

If we want to define the CSS cascade mode, we have to say that it is the method that browsers use to solve the problem of CSS rules that we have competitively defined.

如果要定义CSS级联模式，则必须说这是浏览器用来解决我们竞争定义CSS规则问题的方法。

Each time we write a rule in CSS, that rule enters the CSS cascade mode to determine if it affects the final styling output. The lower the rule, the lower the probability that it will affect the final style.

每次我们用CSS编写规则时，该规则都会进入CSS级联模式，以确定它是否影响最终的样式输出。 规则越低，它将影响最终样式的可能性就越低。

Now we will discuss different aspects of this waterfall.

现在，我们将讨论该瀑布的不同方面。

1.重要性 (1. Importance)

The first part of this waterfall looks at the type of rule to realize its importance.

该瀑布的第一部分着眼于规则的类型以了解其重要性。

In terms of importance, there are 4 categories of rules in CSS:

在重要性方面，CSS中有4类规则：

a)过渡 (a) Transition)

The rules that apply to active transfers will be of great importance.

适用于主动转移的规则将非常重要。

b)重要 (b) !important)

When we add this item to the end of the definition of a rule in CSS, that rule falls into this category. It is best to use this keyword only when overriding styles that you have received from a third-party library.

当我们将此项目添加到CSS中的规则定义的末尾时，该规则将属于此类别。 最好仅在覆盖从第三方库收到的样式时才使用此关键字。

c)动画 (c) Animation)

The rules assigned to an active animation fall into this category.

分配给活动动画的规则属于此类别。

d)正常规则 (d) Normal rules)

This is where most of the CSS rules fit.

这是大多数CSS规则适用的地方。

As you may have noticed, the main purpose of this section is to ensure that the animations are executed correctly; Of course, some helpless developers can also use it. (!important)

您可能已经注意到，本节的主要目的是确保正确执行动画。 当然，有些无助的开发人员也可以使用它。 (！重要)

Now let’s give it a better look of the first part:

现在让我们对第一部分做一个更好的了解：

一个) (A))

p {
 color: sandybrown;
}

B) (B))

p {
 color: orchid !important;
}

In our document, the colour of the p tags will eventually change to orchid . Because case B is in !importantcategory and case A is in normal rules category. So item B will be given more priority.

在我们的文档中， p标签的颜色最终将变为orchid 。 因为案例B在!important类别中，案例A在常规规则类别中。 因此，项目B将获得更高的优先级。

Now if the match is tied in the first hand (both CSS rules are in the same category in terms of importance) we must pay attention to the following sections:

现在，如果比赛是第一手的(就重要性而言，两个CSS规则都在同一类别中)，我们必须注意以下部分：

2.起源 (2. Origin)

The second part of our waterfall is about where that rule is defined.

瀑布的第二部分是关于该规则的定义位置。

There are 3 places to define a rule:

有3个地方可以定义规则：

a)网站 (a) website)

This is the only level you control as a developer.

这是您作为开发人员控制的唯一级别。

b)用户 (b) User)

c)浏览器 (c) Browser)

Each browser has its own set of styles that make some items, such as buttons have a default style.

每种浏览器都有自己的样式集，这些样式可以使某些项目(例如按钮)具有默认样式。

注意： (Note:)

Contrary to popular belief, the default rules of the browser that have !important will prevail over the category rules of the website that have this keyword; While the rules of the website will often be superior to the default rules of the browser.

与流行的看法相反，具有!important的浏览器默认规则将优先于具有此关键字的网站的类别规则； 网站的规则通常会优于浏览器的默认规则。

3.特异性 (3. Specificity)

The third aspect of our CSS waterfall os the specificity of a rule.

CSS瀑布的第三个方面是规则的特殊性。

There are 4 categories of selectors:

选择器分为4类：

a)内联 (a) Inline)

Styles that fit into the style property of HTML tags, have the highest priority.

适合HTML标签的style属性的style具有最高优先级。

出价 (b) id)

We can target the elements we want using their id name; Like #id .

我们可以使用ID名称来定位所需元素。 像#id一样。

c)类/属性/伪类 (c) class / attribute / pseudo-class)

We can target the elements we want using their class name; Like .class .

我们可以使用它们的类名来定位想要的元素。 像.class一样。

This level also includes attribute selectors that point to a specific attribute in HTML; Like [checked] .

该级别还包括指向HTML中特定属性的属性选择器。 像[checked] 。

The last item in this category will be pseudo-selectors; Like :hover .

此类别中的最后一项将是伪选择器； 像:hover 。

d)类型/伪元素 (d) type / pseudo-element)

In CSS, different elements can be addressed using their tag name; Like h1 .

在CSS中，可以使用标签名称来寻址不同的元素。 像h1一样。

Other items in this category are pseudo-elements such as :before .

此类别中的其他项目是伪元素，例如:before 。

let’s see some examples:

让我们看一些例子：

一个) (A))

<p style="color: sandybrown">...</p>

B) (B))

p {
 color: orchid;
}

The first rule will certainly prevail; Because, as we said before, inline rules take precedence over type selector rules.

第一条规则一定会占上风； 因为，正如我们之前所说，内联规则优先于类型选择器规则。

Another example:

另一个例子：

一个) (A))

.paragraph {
 color: sandybrown;
}

B) (B))

#paragraph {
 color: orchid;
}

In this example, the second rule will take precedence; Because id selectors have a higher priority than class selectors.

在本例中，第二条规则优先。 因为id选择器比类选择器具有更高的优先级。

一个) (A))

.paragraph:first-of-type {
   color: sandybrown;
}

B) (B))

p.paragraph {
  color: orchid;
}

In the example above, the first item will be the winner; Because this case has 2 level-three selectors (class and pseudo-class), but the second case has a selector of this level (class) and the level four selector (type) is not used in this comparison.

在上面的示例中，第一个项目将是获胜者； 因为此案例具有2个三级选择器(类和伪类)，但是第二个案例具有该级别(类)的选择器，并且在此比较中不使用四级选择器(类型)。

一个) (A))

p#paragraph {
   color: sandybrown; 
}

B) (B))

#paragraph.paragraph {   
    color: orchid; 
}

In this example, the second rule wins; It is true that both of these rules have a selector of level 1 (id), but the second rule also has a selector of level 3 (class) which has a second selector of the first rule which is of level 4 (tag name ) Prevails.

在此示例中，第二条规则获胜； 这两个规则确实具有级别1(id)的选择器，但是第二个规则也具有级别3(class)的选择器，后者具有级别4(标记名)的第一个规则的第二个选择器。盛行。

4.位置 (4. Position)

Finally, we come to the final part where we talk about the positioning of rules.

最后，我们进入最后一部分，讨论规则的定位。

The rules that are placed later in the style tag or in the style of the linked sheets will win.

稍后放置在样式标签或链接表样式中的规则将获胜。

p {
   color: sandybrown;
   color: orchid;
}

In this example, the colour of the paragraphs will eventually turn into orchid .

在此示例中，段落的颜色最终将变成orchid 。

结论 (Conclusion)

I hope this article has helped you better understand CSS cascading and reduce your confusion in the future.

我希望本文能帮助您更好地理解CSS级联并减少将来的混乱。

From now on, you will have better ways to debug styles other than !important.

从现在开始，除了!important之外，您将拥有更好的调试样式的方法。

翻译自: https://medium.com/@rezapazan/what-are-the-css-cascade-rules-88b4719ba489

css优先级权重计算规则