我目前只读了几节的内容,感觉这本书写的非常好。可以帮我理清了css渲染的逻辑,所以就想精读一下,并写成博客。
css的本质就是给页面对象施加效果的一系列规则,就像是魔法棒可以对不同的石头施加不同的魔法。我们可以把一个样式表当成一支魔棒,css中的一行声明就是一次魔法的施放。同一个石头可能会被施加不同的魔法,而这些魔法又是同一类型的魔法,比如都是控制大小的魔法,或都是控制颜色的魔法,那最终就只有一个魔法咒语能生效。判断哪一个魔法能生效的规则就是层叠。它主要取决于三个方面:
魔法棒的种类(样式表的来源)魔法棒选中石头的方式(选择器的优先级)施放魔法的顺序(源码顺序)样式表的来源有三类:
用户代理样式表用户样式表(很少见)作者样式表作者魔棒施放的魔法天然就比用户代理魔棒施放的魔法更强,因为用户代理魔棒是默认最先施放的魔方,作者魔棒的魔法有后发制人的优势。
如果同样是作者魔棒的魔法,那么谁最后能影响石头的状态呢?那就要看你是用什么样的方式标记中石头的。 如果你此时就在这块石头旁边,那就不需要喊出这块石头的名字,默认就是对这块石头施加魔法,此时你比其他需要预先选中的魔法都要更强。这就是直接用HTML的style属性写样式,不需要选择器,优先级比需要选择器的都要高。
那些需要预先选中施法石头的魔法也不都是一样的,如果是通过石头的id选中的,那就比通过石头的class选中的优先级更高。魔法总是会同时作用于多块石头,如果这个魔法能比其他魔法更具体地指明要作用于哪块石头,那这个魔法的优先级就越高,石头的id是比石头的class更具体的名字。
id>class>属性名
如果两个魔法使用的是这块石头同一类型的名字,那么就是数量游戏了,谁用的多谁赢,用了两个属性名的魔法就是比只用只用一个属性名的魔方强。
但要注意,不管多少个属性名都比不过一个class;同理,多少个class都比过一个id。数量并不是万能的,一些鸿沟是无法跨越的。
如果上述的较量都没能让两个魔法分出高下,那说明这两个魔法势均力敌,后一个施放的可以天然地覆盖前一个施放的,又一次后发制人,漂亮!
在上述的规则之外,还有一个禁忌的魔法,不到万不得已,魔法师是绝对不会使用的,那就是用!important对原来的魔法进行附魔,那这个魔法就会比任何没有!important附魔的魔法都强,这条规则强过以上的所有规则。
当然,它也不是无敌的,只是能打败它的只有它自己。如果把不同魔法的竞争比喻成一场不断提升优先级的军备竞赛,那么!important就是绝对的核武器。