《深入解析CSS》要点摘记

    科技2022-07-11  111

    文章目录

    前言一、基础回顾第1章 层叠、优先级和继承1.1 层叠样式表的来源选择器的优先级源码顺序!important 1.2 继承1.3 特殊值1.4 简写属性 第2章 相对单位 二、1.2. 总结


    前言

    我目前只读了几节的内容,感觉这本书写的非常好。可以帮我理清了css渲染的逻辑,所以就想精读一下,并写成博客。


    一、基础回顾

    第1章 层叠、优先级和继承

    1.1 层叠

    css的本质就是给页面对象施加效果的一系列规则,就像是魔法棒可以对不同的石头施加不同的魔法。我们可以把一个样式表当成一支魔棒,css中的一行声明就是一次魔法的施放。同一个石头可能会被施加不同的魔法,而这些魔法又是同一类型的魔法,比如都是控制大小的魔法,或都是控制颜色的魔法,那最终就只有一个魔法咒语能生效。判断哪一个魔法能生效的规则就是层叠。它主要取决于三个方面:

    魔法棒的种类(样式表的来源)魔法棒选中石头的方式(选择器的优先级)施放魔法的顺序(源码顺序)

    样式表的来源

    样式表的来源有三类:

    用户代理样式表用户样式表(很少见)作者样式表

    作者魔棒施放的魔法天然就比用户代理魔棒施放的魔法更强,因为用户代理魔棒是默认最先施放的魔方,作者魔棒的魔法有后发制人的优势。

    选择器的优先级

    如果同样是作者魔棒的魔法,那么谁最后能影响石头的状态呢?那就要看你是用什么样的方式标记中石头的。 如果你此时就在这块石头旁边,那就不需要喊出这块石头的名字,默认就是对这块石头施加魔法,此时你比其他需要预先选中的魔法都要更强。这就是直接用HTML的style属性写样式,不需要选择器,优先级比需要选择器的都要高。

    那些需要预先选中施法石头的魔法也不都是一样的,如果是通过石头的id选中的,那就比通过石头的class选中的优先级更高。魔法总是会同时作用于多块石头,如果这个魔法能比其他魔法更具体地指明要作用于哪块石头,那这个魔法的优先级就越高,石头的id是比石头的class更具体的名字。

    id>class>属性名

    如果两个魔法使用的是这块石头同一类型的名字,那么就是数量游戏了,谁用的多谁赢,用了两个属性名的魔法就是比只用只用一个属性名的魔方强。

    但要注意,不管多少个属性名都比不过一个class;同理,多少个class都比过一个id。数量并不是万能的,一些鸿沟是无法跨越的。

    源码顺序

    如果上述的较量都没能让两个魔法分出高下,那说明这两个魔法势均力敌,后一个施放的可以天然地覆盖前一个施放的,又一次后发制人,漂亮!

    !important

    在上述的规则之外,还有一个禁忌的魔法,不到万不得已,魔法师是绝对不会使用的,那就是用!important对原来的魔法进行附魔,那这个魔法就会比任何没有!important附魔的魔法都强,这条规则强过以上的所有规则。

    当然,它也不是无敌的,只是能打败它的只有它自己。如果把不同魔法的竞争比喻成一场不断提升优先级的军备竞赛,那么!important就是绝对的核武器。

    1.2 继承

    1.3 特殊值

    1.4 简写属性

    第2章 相对单位

    二、

    1.

    2.


    总结

    Processed: 0.013, SQL: 8