zoukankan      html  css  js  c++  java
  • 【学习笔记】CSS优先级规则

      CSS的优先级规则很多地方的说法都是错误的,常见错误说法是inline css>内部样式>外部样式,其实并没有这种规定。真正的CSS优先级确定是通过特性值大小确定的,在特性值大小相同的情况下,哪个样式出现在最后采用哪个样式。

      在大型复杂系统或css样式太多的情况下,同一个元素可能有多个css样式能够指定,但最终只有一种样式能够真正使用,这时我们就需要通过特性值大小来确定采用何种样式了。(注:css样式书写推荐使用层级嵌套,明确的层级嵌套能够更好得给我们希望的元素设置样式,预防出现奇怪的样式冲突问题)。

      真正的优先级规则是指:!important> inline css > id选择器 > class选择器 > tag选择器,假设我们给定 inline css 权重为A,id选择器权重为B,class选择器权重为C,tag选择器权重为D。那么存在A>B>C>D这种关系,且n个B(C,D)无论怎么加永远小于A(B,C)的权重。(有意思的是有些选择器(Firefox 52.0.2 (64 位)、IE11等)认为class选择器的数量大于255时会超过id选择器,不过这种情况通常不存在,没人写那么多选择器)。在判定一个元素使用哪一个样式时(不包含inline css且没有!important的情况下),先比较多个样式中A权重的多少,如果一样再比较B,直到比较到D为止,如果ABCD都一样,使用最后引用的那个样式。(我们通常说内部样式>外部样式通常是因为内部样式引用顺序在外部样式引用顺序之后,其实这两种方式根本就没有优先级关系,只有先后关系)。(还有一点,真正上我们并不区分内部样式和外部样式,硬要区分的话才做划分)。

      有个先后顺序确定优先级的比较好的例子:我们知道a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active,并且这四个伪类如果对同一个元素设置同一个属性,那它们的声明顺序还有一定要求,一般大家都遵循“LVHA”(爱恨原则love hate)。根据css优先级计算规则,伪类的特殊性值是C,4个伪类的特殊性值相同,那么后面声明的规则优先级高。当鼠标滑过a链接时,满足:link和:hover两个伪类,要改变a标签的颜色,就必须将:hover伪类在:link伪类后面声明;同理,当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。

      

  • 相关阅读:
    XAML学习笔记之Layout(五)——ViewBox
    XAML学习笔记——Layout(三)
    XAML学习笔记——Layout(二)
    XAML学习笔记——Layout(一)
    从0开始搭建SQL Server 2012 AlwaysOn 第三篇(安装数据,配置AlwaysOn)
    从0开始搭建SQL Server 2012 AlwaysOn 第二篇(配置故障转移集群)
    从0开始搭建SQL Server 2012 AlwaysOn 第一篇(AD域与DNS)
    Sql Server 2012 事务复制遇到的问题及解决方式
    Sql Server 2008R2升级 Sql Server 2012 问题
    第一次ACM
  • 原文地址:https://www.cnblogs.com/lauzhishuai/p/10192268.html
Copyright © 2011-2022 走看看