样式表优先级全而简的总结

作者:vkvi 来源:千一网络(原创) 日期:2013-7-16

全而简的总结?既全又简,不矛盾吗?不矛盾,全是指涉及的方面完善,简是指介绍最常见的应用。互联网讲究的就是效率,如果而大而全的教程,是没人看的,看了也记不住。麻痹,比话真多。

基础知识

默认样式的优先级最低

比如虽然我们没有指定 li 前面有个黑点,但它实际上显示出来就有,这就是浏览器的默认样式,这个优先级最低。

内联样式的优先级最高

就是直接利用标签的 style 属性写的样式优先级最高。

“页面内嵌样式 > 外部文件样式”这种说法是错误的

网上有人说“页面内嵌样式”的优先级高于“外部文件样式”,其实这种说法是错误的,其实是在选择符优先级一样的情况下,谁在 HTML 代码位置的后面,谁生效(下一条就是说的这个)。

优先级相同的话,写在后面的样式表优先级高

以上示例为了简单,都是使用的 .c1,有相同的优先级。还有,class 属性中可用空格隔开多个 className,在 class 属性中,哪个 className 写在前面、后面,是没有影响的,比如:class="c1 ca" 等效于 class="ca c1"。

最后一个选择符

近水楼台先得月

id 的优先级是高于 class 的(后面会介绍),但是由于 Hello CSS. 这个内容的“直接领导”是 l4,所以说样式表中 .l2 .l3 虽然用了两级,#l1 虽然是用的 id,但它管不到,所以最终生效的是红色。同理,如果第一句 CSS 不存在,则离 Hello CSS. 最近的是 l3,则第二句 CSS 生效。

最后一个选择符以前的选择符无就近原则

近水楼台先得月的这个就近原则只限于最后一个选择符。如上,最后一个选择符相同,虽然 .l2 比 .l1 更靠近 Hello CSS.,但是这里没有就近原则,所以它们的优先级就要看谁在后了,谁在后谁生效。

另外:近水楼台先得月的这个就近原则没标签啥事。你说你写一个 div { color:red; },它是不是最贴近于 Hello CSS. 呢?不是的。即使你是唯一的标签,也没标签啥事,标签不参与这个就近原则。

级别评比

优先级:id > class > 标签 > 伪类

同样是上面的 HTML 代码,把 CSS 换成:

最终为红色。

上面是个简单的例子,常用的实际上是多层级的情况下

再看:

如上可以归纳为,层级越是具体,优先级越是高。如果从数学上来说:id 是一个数量级的,class 是一个数量级的,tag 是一个数量级的。无论多少个 class 都抵不过一个 id,无论多少个 tag 都比不上一个 class。

注意:上面的 #l1 .l3、div.l1 div.l2 div.l3 中的 .l3 与 div.l3 都是位于最后一个选择符,但是并不能因为 div.l3 多了一个 div 它的优先级就高,因为它们指向的是同一个元素,这是已经确定了的事,下一步就看前面的选择符谁的优先级高。再看一个例子也是这样的:

但如果只是 .l3 与 div.l3 相比,前面没有其它东西的时候,或者前面是一样的,则 div.l3 是高于 .l3 的。

超链接的垂直管理

垂直管理就像某些机构中的一样,地方特工不受地方政府管理,而受上级特工管理。请参见这篇文章:超链接的伪类听谁的呢?

你前面那位网友看了:WebRequest 错误:Unable to connect to the remote server

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
标题:必填
内容:
本站永远终止与捏造“罪名”不支付广告费的某度联盟合作。
vkvi
vkvi

作者简介: vkvi,致力于 .NET Web 开发、移动开发的技术推广,在 .NET、SQL Server、Windows Server 等方面有深入研究和丰富经验,10 年间共计撰写文章 4000 余篇。 主持金融、国土、农业、电商等多个行业项目执行, 推行“技术提升生产力、人心决定成功率”的管理理论。 联系他