高频彩骗局拉人骗局
最近，我一直在从事SitePoint项目：《终极CSS参考》（即将推出！如果您对CSS感兴趣，将会动摇您的世界）。 在研究网络上阴暗的角落以寻找奥秘CSS知识时，我意识到，迫切需要更新有关网络上CSS的许多信息。
从2001年到现在，我们对CSS的知识和一般知识有了飞跃的发展，网络上充满了在这个启蒙时代写的教程，文章和博客文章。 但是，时间在流逝，浏览器也在不断改进。 现代浏览器对CSS的支持水平非常好，就像对CSS hack的深入了解正在Swift变得多余一样，其中很多内容也是如此。 实际上，其中某些内容误导了您的搜索结果，您的搜索结果注定会充满故意的但过时的信息。
在奥秘CSS知识页面中，您会发现称为CSS级联的内容； 最终决定每个元素的样式最终是什么的东西。 当浏览器中发生的事情与您预期的事情完全不同时，它以难以理解而闻名，通常是那些令人沮丧，晦涩CSS问题的原因。 Web上的大量错误信息当然无济于事，所以这是我为纠正这种情况所做的小努力：搁置关于CSS Cascade的两个最大误解。
误解：嵌入式样式优先于外部样式，嵌入式样式优先于嵌入式样式。
就浏览器而言，将CSS链接到文档的方式没有什么不同。 所有这三种方法都被认为具有相同的起源：作者样式表。 导致一个覆盖另一个的原因与它们如何链接到文档无关。
如果重要性和特异性相等，那么唯一重要的是源顺序。 当样式表link元素出现在 style元素（嵌入样式）之后时，在文档的head ，外部样式将覆盖嵌入样式。 我认为这个神话之所以发展，是因为人们通常将link元素放在style元素之前。
内联样式只会覆盖其他样式表中的相同样式声明，因为它们具有更高的特异性（请参见下文），但是重要的声明（也请参见以下内容）会覆盖内联样式，无论声明来自何处，甚至是外部样式表。
误解：特异性可以用总分来表示。
您可能之前已经看过此公式：
specificity = number of IDs * 100 + number of classes * 10 + number of elements * 1
因此，像p.introduction这样的选择器将具有11（10 +1）的选择器分数。 虽然很容易理解，但可能会产生误导； 您可能会开始认为，如果选择器中有10个元素名称，那么它等效于1个类名称，这是完全错误的。 这个神话可能是较旧CSS1和2规范中措辞不佳的解释的遗产。
1个ID选择器始终具有比任何数量的类选择器（甚至一百万个类选择器）更高的特异性！ 一旦级联到达必须按特定性对两个或多个属性声明进行排序的地步，它将像这样进行操作：
- 是一种内联样式吗？ 赢了！ 如果没有内联，则继续执行b。
- 如果选择器中有ID，则计算数字。 最高分获胜！ 分数一样吗？ 继续执行c。
- 计算属性，类名和伪类的数量。 最高分获胜！ 分数一样吗？ 继续进行。
- 计算元素名称或伪元素的数量。 最高分获胜！
如果他们在最后一步具有相同的分数，则它们具有相同的特异性，并且来源顺序决定了哪一个获胜（源中最后一位）。
CSS2.1规范将以a,b,c,d的形式表示上述计数的结果（如果为true，则a = 1，否则为0）。 因此，内联样式的特异性为1,0,0,0而像p.introduction这样的选择器的特异性为0,0,1,1 （一个类和一个元素名称）。 您不能只删除逗号 。
这也消除了其他一些小的误解：
- 错误 ：像
div>p这样的子选择器比后代选择器div p具有更高的特异性。 从上面的过程中，您可以看到甚至没有包含组合器。 他们没有区别。 这两个选择器具有相同的特异性0,0,0,2（2个元素名称）。 通用选择器*也会被忽略。 - 错误 ：
#someid类的选择器比p#someid#someid具有更高的特异性，因为ID选择器排在第一位。 顺序没有区别，只需计算选择器中的组件数即可。#someid的特异性为0,1,0,0而p#someid的特异性为0,1,0,1。 - 错误 ：
!important声明比普通声明具有更高的特异性。 正如您将在下面看到的，特异性与之无关。 - 错误 ：继承的属性的特异性低于声明的属性。 同样，正如您将在下面看到的，特异性与之无关。 实际上，继承与级联根本无关！
级联的Gettin's Cozy
CSS级联比您想像的要容易理解，一旦掌握，您对CSS的理解将取得巨大飞跃。
这是4个简单步骤的级联； 这是每个网页元素的每个CSS属性发生的过程：
- 从所有来源收集该属性的所有声明。 这包括默认的浏览器样式和自定义用户样式，以及作者样式表。 如果有多个，请继续执行2。
- 按重要性和来源按以下顺序对声明进行排序（从最低优先级到最高优先级）：
- 用户代理样式表（默认浏览器样式）
- 用户样式表（用户的自定义样式表）中的常规声明
- 作者样式表中的常规声明（网页样式表；外部，嵌入式和嵌入式样式）
-
!important作者样式表中的!important声明 -
!important用户样式表中的!important声明
优先级最高的将获胜。 如果有多个优先级相同，请继续执行3。
- 按选择器特异性排序（请参见上面的过程）。 选择者最明确的人获胜。 如果没有明确的获胜者，则继续执行4。
- 源中倒数第二个赢了！
如果级联未在元素上设置CSS属性，则浏览器将退回到使用元素父级的继承属性（这仅适用于某些属性），否则该属性设置为CSS默认值。
而已！ 不太难吗？ 现在，您了解了CSS，只有先知才知道！ 现在，如果您在玩游戏，那就起床跳跳夹具庆祝。 我确实做到了！
*穿着T恤在头顶上跑来跑去，双手高举，尖叫着！
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
好吧，尽量不要在你脑海中想像一下……
如果您真的想以不会让您的大脑困惑的方式来了解CSS，请尝试SitePoint视频： CSS Video Crash Course 。
翻译自: https://www.sitepoint.com/the-great-specificity-swindle/
高频彩骗局拉人骗局
8097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
