Css的三大机制(特性):特殊性、继承、层叠详解_html/css_WEB-ITnose

2019年9月21日15:00:30
评论

继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用那些值时,用户代理(浏览器)不仅要考虑继承,还要考虑声明的
特殊性(specificity),另外需要考虑声明本身的来源。这个过程就称为
层叠(cascade)。在此我们将讨论css这三种机制的原理和关联。

一、特殊性

考虑以下2对规则,假设每一对规则都匹配同样的元素:

h1 {color: red; }body h1 { color:green;}
h2.grape {color: purple;}h2 {color: siver;}

每一对规则中只有一个能胜出,因为所匹配的颜色只能是一种颜色,那么怎样知道哪一个规则会更强呢?答案就在于每个选择器的特殊性。

1.特殊性值:

选择器的特殊性由选择器本身的组件确定。特殊性的值表述为4个部分:0,0,0,0。

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

  • 对于内联样式为:1,0,0,0。
  • 对于选择器中的ID属性值,加0,1,0,0。
  • 对于选择器中的类属性值、属性选择、或伪类,加0,0,1,0。
  • 对于选择器中的元素和伪元素,加0,0,0,1。
  • 通配符选择器(*),加0,0,0,0。
  • 特殊属性计算值:

    h1 {color: red;}/*specificity=0,0,0,1*/p em {color:purple;}/*specificity=0,0,0,2*/.grade{color:purple;}/*specificity=0,0,1,0*/*.bright{color:yellow;}/*specificity=0,0,1,0*/div#header [href]{color:black;}/*specificity=0,1,1,1 包涵一个属性选择器*/

    2.重要性!important

    有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入

    ! important来标志。

    P {color ; red ! important; background: yellow}

    二、css继承性

    1、

    上图中包含两个列表,一个无序,一个有序。将生明 color:gray;应用到body元素时,这个元素会采用该声明。这个值再沿着树向下传播到后代元素,并一直继续,直到没有更多得后代元素继承这个值为至。(元素不会把值向上传递到其祖先,但是有一个例外,应用到body元素的背景样式可以传递到html元素。)

    2、可以继承的属性

    css中可以继承的属性概括为——所有关于文字图片大小样式的属性可以继承( 例如:letter-spacing、word-spacing、white-space、line-height、color、font等)

    3、继承属性的特殊性

    继承的值没有特殊性,甚至连0特殊性都没有。

    三、层叠

    如果特特殊性相等的两个规则同时应用到同一个元素,浏览器会怎样解决这个冲突呢?如

    h1 {color: red;}h1 {color:blue;}

    这两个规则的特殊性都是0,0,0,1,所以他们的权重相等。但是一个元素不可能即是红色又是蓝色,这时就要应用层叠规则。

    1、找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。

    2、按显示权重对应用到该元素的所有声明排序。标志(!important)的规则的权重要高于没有(!important)标志的规则。按来源对应用到元素的所有生明排序,创作人员>读者>用户代理。

    权重由大到小的顺序为:

  • a、读者的重要声明。
  • b、创作人员的重要声明。
  • c、创作人员的正常声明。
  • d、读者的正常声明。
  • e、用户代理声明。
  • 3、按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。

    4、按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的声明在后。

    四、总结

    层叠样式表中最基本的方面就是层叠——冲突的声明要通过这个层叠过程排序。

    读者的重要声明(!important)>创作人员的重要声明(! important)>内联样式(1,0,0,0)>id选择器(0,1,0,0)>类选择器、属性选择器、伪类选择器(0,0,1,0)>元素选择器(0,0,0,1)>

    通配符选择器(0,0,0,0)>继承的属性>浏览器默认样式。

    特例:元素的color、text-decoration属性,以及标题元素的font-size 属性,浏览器默认的样式优先级>继承属性的优先级。

    企鹅博客
    • 本文由 发表于 2019年9月21日15:00:30
    • 转载请务必保留本文链接:https://www.qieseo.com/367114.html

    发表评论