CSS学习笔记2--结构和层叠

  |  

前言

CSS一直学的很烂,所以打算在这个寒假重新系统的学一遍


44



特殊性

同一个元素可以使用两个或多个规则来选择,每个规则都有其自己的选择器。那么当样式冲突时,浏览器到底怎么渲染,这就涉及到了CSS选择器的特殊性了。

选择器的特殊性有选择器本身的嘴贱确定。特殊性值表述为4个部分,如:0,0,0,0。

越高位特殊性越高。一个选择器的具体特殊性如下确定:

  • 对于选择器中给定的各个ID属性值,加0,1,0,0
  • 对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0
  • 对于选择器中给定的各个元素和伪元素,加0,0,0,1
  • 结合符和通配选择器对特殊性没有任何贡献。

最后根据选择器特殊性的值的比较结果决定应用那个选择器的样式。

分组选择器会将其“解组”为单独的规则,然后确定其对应的特殊性。

通配符的特殊性:通配符的特殊性是0,0,0,0,但是这与根本没有特殊性还是有区别的,主要体现在继承上

结合符:子结合符(>)、兄弟结合符(+)根本不具有特殊性

ID和属性选择器的特殊性:要注意,ID选择器和指定ID属性的属性选择器在特殊性上是不同的。前者的特殊性是0,1,0,0,而后者只有0,0,1,0

这里可能会奇怪,为什么特殊性有四位,而我们只用了三位,这是因为第一位是为了内联样式保留的,在CSS2.1以后,内联样式的特殊性为1,0,0,0。

重要性:

当一个声明十分重要,超过其它声明时,CSS2.1称之为重要声明,其使用方式实在这些声明的结束分号之前插入!important标志。注意,一定是在结束分号之前,和结束分号之间不能有任何的关键词。

!important标志并不会增加声明的特殊性,它的作用在于让重要声明之间解决特殊性冲突问题,非重要声明之间解决特殊性冲突。重要声明永远优先于非重要声明。

继承

基于继承机制,样式不仅应用于指定的元素,还会应用到它的后代元素,并且这个向下继承的过程会一直传递,直到没有更多的后代元素。

样式值只会向下传播,绝不会向上传递给它们的祖先,除了body元素。应用到body元素的背景样式可以传递到html元素,相应的可以定义其画布。

但不是所有的属性都会被继承。一般的,大多数盒式模型的属性(包括外边距、内边距、背景和边框)都不能被继承。

继承的样式没有特殊性。

所以即使是统配选择器也要优先于继承值,因为统配选择器是拥有特殊性的,虽然为0,0,0,0

层叠

在之前我们讨论的时候,一直忽略了一个问题,就是当特殊性相等的两个规则同时应用到同一个元素,浏览器到底会怎么渲染。这个时候,就需要使用“层叠样式表”。CSS所基于的方法就是让样式层叠在一起。这是通过结合继承和特殊性做到的。在接好层叠规则之前,首先先了解一下CSS样式的三种来源:

  • 创作人员:及程序员写的样式
  • 读者:及用户通过F12调的样式
  • 用户代理:及浏览器默认的一些渲染,比如说网页中的链接默认蓝色。

层叠规则如下:

  • 找出所有相关的规则,这些规则都包含一个给定元素匹配的选择器。
  • 按显示权重对应用到该元素的所有声明进行排序。标志!important的规则的权重要高于没有!important标志的规则。根据来源进行排序。正常情况下创作人员的样式>读者的样式>用户代理的样式。但是有!important标志的都这样是要强于所有样式。
  • 按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
  • 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表中或文档中越后出现,它的权重就越大。如果样式表中有导入的样式表,一般认为导入样式表的声明出现的比主样式表早。

总结一下就是,在声明权重方面,权重从大到小的顺序依次为:

  • 读者的重要声明
  • 创作人员的重要声明(其中再按特殊性进行排序,特殊性相同按出现前后排序)
  • 创作人员的正常声明(其中再按特殊性进行排序, 特殊性相同按出现前后排序)
  • 读者的正常声明
  • 用户代理声明

顺序排序的重要应用:

顺序排许的一个重要应用就是链接样式顺序。一般建议按link-visited-hover-active(LVHA)的顺序声明

1
2
3
4
:link {color: bule;}
:visited {color: purple;}
:hover {color: red;}
:active {color: orange;}

按照这个顺序,当我们点击一个未访问的连接时,link,hover,active都可以应用,但是根据顺序,最后应用的是active,这也正是我们期望的。而如果顺序不正确,则会导致一些问题

1
2
3
4
:hover {color: red;}
:active {color: orange;}
:link {color: bule;}
:visited {color: purple;}

按照这个顺序hover和active都不会的到应用,因为一个链接要么是未访问的,要么就是已经访问过的。加上它两的顺序在后,所以link和visited的样式总会覆盖hover和active。

不过我们可以根据具体需要,修改一下顺序。比如说,我们只希望未被访问过的链接出翔悬停样式,已经访问过的链接没有这样的样式。那么我们可以应用一下的顺序

1
2
3
4
:link {color: blue;}
:hover {color: yellow;}
:visited {color: blue;}
:active {color: red;}

当然这只是在所有规则设置同一个属性时才要考虑的问题,如果各规则为不同的属性设置样式,则无需考虑顺序的问题。而且这个问题也可以通过将伪类链接起来解决。

非CSS表现提示

除了CSS还有一些标签也能改变样式,譬如font元素,虽然现在已经很少使用元素去确定样式了,但是我们还是不能忽略这个问题。所有的非CSS提示被处理为特殊性为0,并且出现在创作人员样式表的最前面

文章目录
  1. 1. 特殊性
  2. 2. 继承
  3. 3. 层叠
  4. 4. 非CSS表现提示
|