高频彩骗局拉人骗局
最近,我一直在从事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恤在头顶上跑来跑去,双手高举,尖叫着!
![](https://i-blog.csdnimg.cn/blog_migrate/f04d740701505cdcdbe0aaa3775ce67f.png)
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
好吧,尽量不要在你脑海中想像一下……
如果您真的想以不会让您的大脑困惑的方式来了解CSS,请尝试SitePoint视频: CSS Video Crash Course 。
翻译自: https://www.sitepoint.com/the-great-specificity-swindle/
高频彩骗局拉人骗局