css层叠机制说明

      css通过建立与文档的关联而实施效果。文档结构重要性不言而喻，对于建立良好的内容索引、提高可维护性、较好的可访问性；另，利于css选择器选择、继承机制。

     概要地讲,层叠机制是处理对文档上应用样式时解决该应用何种样式的解决方案,涉及到重要性、特殊性、来源、顺序的问题。下面分别说明。

概要

     每条声明都是有特殊性的,其特殊性由选择器组件确定。用户代理会将特殊性赋予给每条声明。由于存在选择器分组和声明分组的情况，用户代理会将它们解组出来的。然后对应个元素可能会有多条规则。这时，若都是针对相同的属性，那使用何种规则呢？这是层叠机制解决的问题。

特殊性:

       特殊性值结构:x,x,x,x。x代表一个自然数。左边比右边的值大。1、内联样式的特殊性为1,0,0,0，其他首位为0。 2、id特殊性为0, 1，0，0。

3、伪类、类、属性选择的特殊性为0,0,1,0。4、元素、伪元素特殊性为0,0,0,1。5、继承没有特殊性。结合符没有特殊性。通配符特殊性为0,0,0,0。使用上，当重

要性、来源相同条件相同时，特殊性大的获胜。

重要性:

      重要性真的重要,使用上将!important置于";"前面就可以了，注意是关键词的最后。用户代理将重要性的分在一组,普通的分在一组,声明冲突时,重要性的占上

风。但是重要性不会改变特殊性;就是说重要性分组中出现冲突后,按特殊性来。当然还要考虑来源，一般在权重上是创作人员>用户>用户代理。结合起来权重的顺序

是：用户重要声明、创作人员重要声明、创作人员普通声明、用户的普通声明、代理的默认声明。

继承

     就是元素向后代传递属性值的机制,但是未必可靠,与浏览器有关。此外，继承是有限制的，限制了一些与盒模型相关的属性例如：外边距、内边距、背景、边框等

问题。它的特殊性不存在，比通配符还要低，所以不要随意使用通配符选择器。

顺序

     顺序是指当重要性、来源、特殊性等相同的时候，后面的权重会比前面的权重要大。通常是导入的文件的声明在前面。css2.1中认为内联样式的特殊性为

1,0,0,0。css2认为特殊值是0,1,0,0。从顺序上讲，内联样式顺序认为是在后面。

层叠

    既然元素上会有多条规则,可能这些声明是关于相同的属性的。由此，需要层叠。

   1、重要性和来源。见上重要性。

   2、考虑特殊性，特殊性大的权重也大。

   3、顺序。顺序在后面的权重大。

非css结构

       考虑到html中含有用于控制表现的元素，特殊性上是0,0,0,0。顺序认为在创作人员样式表前面，用户样式表、创作人员样式表会将其覆盖掉，用户代理部可以。

 

     

 

转载于:https://www.cnblogs.com/hustliliangmin/p/6116824.html