码迷,mamicode.com
首页 > Web开发 > 详细

CSS理解样式表层叠

时间:2015-08-04 20:45:34      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

在网页中,添加样式的方法有三种:嵌入式样式表,外部样式表和内联样式表。

优先级算法按照先后顺序考虑一下三个方面:

  1.css规则的重要性和来源;

  2.css规则的特殊性;

  3.css规则在文档中出现的顺序;

 

一、找到选择器匹配特定元素的所有声明;

二、根据样式声明的重要性和来源进行优先级排序

  重要性有两种:带“!important”定义的声明和不带“!important”定义的声明。在CSS规则后添加!important的重要性要高于没有添加的。
  来源有三种样式:浏览器默认、开发人员定义的样式、用户在浏览器中定义的样式。
    重要性和来源的优先级排序从低到高是:
      1.浏览器默认样式
      2.用户在浏览器中定义样式中的normal规则
      3.开发人员定义的样式中的normal规则
      4.开发人员定义的样式中的important规则
      5.用户在浏览器中定义的important规则

三、按照特殊性(Specificity)排序

  指定越详细的选择器将覆盖更一般的选择器。

  CSS将计算多个规则中指定每一个规则的选择器的特殊性值,值越高,优先级越高。

  特殊性值是一个由4个整数组成的一个类似数组的值:a,b,c,d,其中a的权重最高,依次类推,d的权重最低。

  计算方法:

  ①如果该规则是一条内联样式,那么a=1,否则a=0;

  ②如果该规则由选择器指定,选择器中出现的id选择器的数量就是b的值;

  ③如果该规则由选择器指定,选择器中出现的属性选择器(包括类选择器)或者伪类选择器的数量总和就是c的值;

  ④如果该规则由选择器指定,选择器中出现的元素选择器或者是伪元素选择器的数量总和就是d的值;

  ⑤通配符选择器*的特殊性值为0,0,0,0。

 由于a的权重最高,因此首先比较a,在a相同的情况,再比较b,依次类推。因此无论b,c,d值有多大,内联样式总是具有最高的特色性。

四、比较CSS规则在文档中出现的顺序

  如果两条规则有相同的重要性、来源和特殊性值,那么,出现在后面的总是比出现在前面的具有更高的优先级。

CSS理解样式表层叠

标签:

原文地址:http://www.cnblogs.com/LisaY/p/4702937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!