css概念_要学习的最重要CSS概念

css概念

The Cascade is how CSS was designed from the very beginning, and there’s a reason it’s called CSS — Cascading Style Sheets!

Cascade是从一开始就设计CSS的方式，有一个叫做CSS的原因-级联样式表！

Sadly, CSS has a poor reputation for the same fundamental concept upon which it is built.

可悲的是，CSS的基本概念声誉不佳。

But what exactly is the Cascade, and is it as bad as most people make it sound?

但是级联到底是什么，它是否像大多数人所说的那么糟糕？

介绍 (Introduction)

Let’s say John writes a bunch of CSS, and then gets on the browser to test it. To his surprise, the styles he wrote aren’t applied to the element he just styled, instead some other styles are!

假设John编写了一堆CSS，然后进入浏览器进行测试。 令他惊讶的是，他编写的样式没有应用于他刚刚设置的样式，而是其他样式！

You see that right there? That’s one of the worst things everyone complains about when they say “CSS sucks”.

你看到那里了吗？ 这是每个人说“ CSS很烂”时都会抱怨的最糟糕的事情之一。

With CSS, multiple styles can affect a single element. So, you have a paragraph on a web page. But this paragraph may be styled by any CSS block, literally.

使用CSS，多种样式可以影响单个元素。 因此，您在网页上有一个paragraph 。 但是，从字面上看，该paragraph可以由任何CSS块设置样式。

It’s like having a global JavaScript variable that can be manipulated by any function within the code. A recipe for disaster, it seems.

就像拥有一个全局JavaScript变量一样，该变量可以由代码中的任何函数操纵。 看来，灾难的根源。

But again, the Cascade forms the fundamental reasoning behind how CSS was created in the first place.

但是，Cascade再次形成了CSS是如何首先创建的基本原因。

Embrace it?

接受它？

Well, you can’t change it.

好吧，你不能改变它。

什么是级联？ (What is the Cascade?)

The cascade is how the browser determines what styles to apply to a particular element. It’s that simple, and it makes a decent interview question for a front-end developer.

级联是浏览器如何确定要应用于特定元素的样式。 就是这么简单，这对于前端开发人员来说是一个不错的面试问题。

Luckily, the nightmares associated with the cascade can be understood, as it is governed by just two factors:

幸运的是，与级联相关的噩梦可以理解，因为它仅受两个因素支配：

1. The specificity of the element selectors
   元素选择器的特异性
2. The order of the styles being written
   所写样式的顺序

Let’s have a quick look at those.

让我们快速浏览一下。

选择器特异性 (Selector Specificity)

You can liken selector specificity to how the human mind interprets instructions.

您可以将选择器的特殊性比喻为人脑如何解释指令。

For example, consider the graphic below:

例如，考虑下图：

If I said to you, “Pass me the red box.”, which would you pass to me? There’s two of them!

如果我对您说：“把红色框递给我。”，您会把哪一个递给我？ 有两个！

You may ask the follow up question, “Which of the boxes, a or b?”.

您可能会问以下问题：“ a或b是哪个框？” 。

Or you may even grab both boxes! Aren’t they both red boxes?

或者，您甚至可以抓住两个盒子！ 他们不是两个红色的盒子吗？

This is the situation the browser finds itself when dealing with specificity.

这是浏览器在处理特定性时发现的情况。

When you say, style the paragraph a red background color…

当您说时，将段落设置为红色背景色…

p {   background-color: red;}

Since there could be a lot of paragraph elements on the page, the browser goes, “what paragraph?”

由于页面上可能有很多段落元素，因此浏览器会显示“什么段落？”

The browser can’t ask you a follow up question, so it goes ahead and attempts to style every paragraph on the page with a red background.

浏览器无法询问您后续问题，因此它继续进行并尝试以red背景为页面上的每个段落设置样式。

However, if you had gone ahead to say, style the paragraph with a class name of reddy with a red background:

但是，如果您要说的话， reddy使用红色背景的类名reddy设置段落的样式：

p.reddy {  background-color: red;}

That is a more specific request!

那是一个更具体的要求！

Now, the browser will style the specific paragraph element(s) you have requested.

现在，浏览器将为您请求的特定段落元素设置样式。

That’s it!

而已！

Technically, the browser takes a look at every selector that targets a specific element and assigns “scores” to each of them, and the one with a higher specificity score wins.

从技术上讲，浏览器会查看针对特定元素的每个选择器，并为每个选择器分配“分数”，从而获得更高的特异性得分。

The way it computes the scores is simple.

它计算分数的方法很简单。

Assume the browser — while interpreting your CSS — had 4 goal posts.

假设浏览器在解释CSS时有4个目标帖子。

1. For every inline style that targets an element using the style attribute, 1 goal is assigned to goal post (a).

   对于使用style属性以元素为目标的每个内联样式，都会向目标发布(a)分配1个目标。

2. For every id selector, 1 goal is assigned to post(b).

   对于每个id选择器，将1个目标分配给帖子(b) 。

3. For every class selector, attribute selector, and pseudo-classes present, 1 goal is assigned to post(c).

   对于存在的每个class选择器，属性选择器和伪类，将一个目标分配给post (c) 。

4. For every element selector and pseudo-element, 1 goal is assigned to post (d).

   对于每个元素选择器和伪元素，将1个目标分配给post (d) 。

The way I remember this is by using the acronym, SICAPEP:

我记得的方式是使用首字母缩写SICAPEP：

Upon assigning points, the total points are calculated by concatenation, as digits in a 4-digit number.

分配点后，总点数通过级联计算为4位数字中的数字。

快速特异性示例 (A Quick Specificity Example)

Consider the following style declarations:

考虑以下样式声明：

#nav .removed > a:hover {}

li:last-child h3 .title {}

How would the browser calculate the specificity “points” for these selectors?

浏览器将如何计算这些选择器的特异性“点”？

#nav .removed > a:hover

#nav .removed > a:ho ver

Here’s the breakdown:

细目如下：

(a) There’s no inline style, so the score for the first goal post is 0.

(a)没有内联样式，因此第一个球门柱的得分为0。

(b) There’s one id selector, #nav, that’s a score of 1 for the second goal post.

(b)有一个id选择器#nav ，第二个门柱得分为1。

(c ) There’s also one class selector, .removed and one pseudo-class selector, :hover, which sums up to a score of 2 for the third goal post.

(c)还有一个class选择器.removed和一个伪类选择器:hover ，其得出第三个目标得分的总和为2。

(d) There’s one element selector, a, that’s a score of 1 in the fourth post.

(d)有一个元素选择器a ，在第四篇文章中得分为1。

Here’s the graphical representation of the scores.

这是分数的图形表示。

The total specificity score is concatenated as 0121.

总特异性得分为0121 。

As with regular math, 0001 is smaller than 0005, and 0121 is greater than 0021.

与常规数学一样， 0001小于0005 ，而0121大于0021 。

Now, you understand how specificity is calculated.

现在，您了解了如何计算特异性。

Can you attempt to calculate the specificity for the other selector, li:last-child h3 .title ?

您可以尝试计算另一个选择器li:last-child h3 .title吗？

Let me know what you arrive at in the comment section :)

让我知道您在评论部分中得到了什么:)

样式顺序 (Style Order)

The second factor that influences the cascade is the order of styles. A really basic example can be seen with styling the same element in 2 different code blocks.

影响级联的第二个因素是样式的顺序。 在两个不同代码块中对同一元素进行样式设置，可以看到一个非常基本的示例。

For example:

例如：

p.reddy {  background: red;}p.reddy {   background: blue;}

Even though both selectors have the same specificity, 0011, the order of the ruleset comes into play.

即使两个选择器具有相同的特异性0011 ，规则集的顺序也会起作用。

The second declaration will overrule the former, and the paragraph will be blue and not red.

第二个声明将否决前一个声明，并且该段将为蓝色而不是红色。

技巧问题 (Trick Question)

Considering the document below, what would be the color of the link text?

考虑以下文档，链接文本的颜色是什么？

<!doctype html> <html><head><title>Inline Styles and Specificity</title> <style type="text/css">    #nav-force &gt; ul > li > a.nav-link { 	color: blue;     };</style> </head>   <body>      <nav id="nav-force">	<;ul> 	 <li>	  <a href="/" class="nav-link" style="color: red;">		Link          </a> 	 </li>	</ul>       </nav>  </body> </html>

Blue or red?

蓝色还是红色？

Note that the link is styled both inline, and within the <style>&lt;/style> block.

请注意，该链接在行内和<style>&l t; / style>块中均具有样式。

Oh, if you’re feeling confident, just say the answer loud — to yourself.

哦，如果您有信心，请对自己大声说出答案。

But the real answer is, the inline style always wins. The goal is scored in the first post, which beats any goals in any of the other posts.

但真正的答案是，内联样式总是胜出。 目标在第一篇文章中得分，超过其他任何一篇文章中的任何目标。

Why?

为什么？

The final specificity will be in the order of thousands — 1000 — and that beats 9 goals in the second post. 1000 is greater than 0900.

最终的特异性将在数千(1000)的数量级，并且在第二篇文章中击败了9个目标。 1000大于0900。

NOTE: As pointed out by Paul McCann in the comment section, the paragraph above is an over simplification. Have a look at what he says.

注意：正如Paul McCann在评论部分所指出的，以上段落过于简化。 看一下他说的话 。

结论 (Conclusion)

Hopefully, you’ve now being armed with the solid understanding of how the cascade works. Learning more advanced CSS will now probably come easier, and, more importantly, you now know where to look when you have those pesky bugs.

希望您现在已经对级联的工作原理有了深刻的了解。 现在，学习更高级CSS可能会变得更加容易，而且更重要的是，当您遇到那些讨厌的bug时，您现在知道该去哪里了。

Catch you later!

待会见！

准备成为专业人士了吗？ (Ready to become Pro?)

I have created a free CSS guide to get your CSS skills blazing, immediately. Get the free ebook.

我已经创建了一个免费CSS指南，可让您立即掌握CSS技能。 获取免费的电子书 。

翻译自: https://www.freecodecamp.org/news/the-most-important-css-concept-to-learn-8e929c944a19/

css概念