CSS层叠规则:

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

2、按权重(!important)和来源对应用到给定元素的所有声明进行排序。

3、按特殊性对应用到给定元素的所有声明进行排序,有较高特殊性的元素权重要大于有较低特殊性的元素,0特殊性比无特殊性要强(继承)

4、按出现顺序对应用到给定元素的所有声明进行排序,后面出现的声明权重要大于前面出现的声明,即后定义的样式会覆盖前面定义的样式。(适用于特殊性一样的时候)

解读:

一、权重和来源

来源:

1、创作人员(开发者)

  1)、外部样式,即<link>引用的CSS后缀文件;

  2)、内部样式,即写在<style></style>标签内的样式;

  3)、内联样式,即直接写在style属性内的样式(网页设计强调结构、表现、行为三者分离,不建议使用。);

2、读者(用户自定义样式:一些页面中会提供一些让用户自定义字体大小颜色等的快捷键;)

3、用户代理(最主要的是:浏览器默认样式)

权重(由大到小的顺序排序):

1)读者的重要声明(!important)

2)创作人员的重要声明(!important)(高于内联样式!)

3)创作人员的正常声明

4)读者的正常声明

5)用户代理的声明

二、样式继承

文档应用声明还有一个很重要的概念,即继承:它依赖于祖先-后代的关系的,继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。

CSS中的继承也是有选择性的,并不是全部CSS都继承,大多数框模型属性都不能继承,例如,内、外边距、背景和边框等。

例如:一个body定义了的颜色值也会应用到段落的文本中。

三、选择器的特殊性

1、对于内联样式,特殊性首位加1,即1,0,0,0。

2、对于选择器中出现的ID属性值,加0,1,0,0, 有多少个ID值就在第二位加几位。

3、对于选择器中出现的类属性值,属性选择及伪类,加0,0,1,0,共出现多少个就在第三位加几位。

4、对于选择器中出现的元素,以及伪元素,加0,0,0,1,共出现多少个就在第四位加几位。

5、通配符对特殊性没有任何贡献,即特殊性是0,0,0,0。

6、结合符没有特殊性,连0特殊性也没有。

7、继承的CSS完全没有特殊性,连0特殊性也没有。

注意:因为通配符*的特殊性是0, 而继承的CSS是没有特殊性的,连0也没有,所以,通配符的权重要大于继承。

特殊性计算示例:

h1{color:red;}  /*specificity = 0,0,0,1*/
p em{color:purple;} /*specificity = 0,0,0,2*/
.grape{color:yellow;} /*specificity = 0,0,1,0*/
*.grape{color:yellow;} /*specificity = 0,0,1,0*/
p.grape em.dark{color:maroon;} /*specificity = 0,0,2,2*/
#grape{color:blue;} /*specificity = 0,1,0,0*/
div#grape *[href] {color:silver;} /*specificity = 0,1,1,1*/
html > body > table tr[id="totals"] td ul > li{color:maroon;} /*specificity = 0,0,1,7*/
h1 + p{color:black;} /*specificity = 0,0,0,2*/

css层叠规则(层叠样式表)的更多相关文章

  1. css层叠规则,优先级算法

    前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...

  2. 2CSS层叠规则(即引入CSS的三种不同方式的优先级)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. css知多少(3)——样式来源与层叠规则(转)

    css知多少(3)——样式来源与层叠规则   上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看 ...

  4. CSS的“层叠”规则的总结

    当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...

  5. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  6. CSS:权重和层叠规则决定了其优先级

    首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...

  7. CSS层叠

    前面的话 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 ...

  8. CSS 层叠及样式表来源

    Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...

  9. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

随机推荐

  1. 201871010128-杨丽霞《面向对象程序设计(java)》第十周学习总结

    201871010128-杨丽霞<面向对象程序设计(java)>第十周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  2. 201871010134-周英杰《面想对象程序设计(java)》第十一周学习总结

    项目 内容 <面向对象程序设计(java)> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/ ...

  3. Ubuntu下apache2安装配置(内含数字证书配置)

    Ubuntu下apache2安装配置(内含数字证书配置)安装命令:sudo apt-get updatesudo apt-get install apache2 配置1.查看apache2安装目录命令 ...

  4. 02-人脸识别-基于MTCNN,框选人脸区域-detect_face

    (本系列随笔持续更新) 这部分代码是基于参考中的链接,修改后适用于TensorFlow1.6.0版本的代码.由于TensorFlow的频繁更新,所以不一定支持后续新或者就版本,特此说明. 程序的最初版 ...

  5. 微信小程序 - 事件 | 传递 | 冒泡

    事件 常见的事件有: 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove 手指触摸后移动   touchcancel 手指触摸动作被打断,如来电提醒,弹窗   t ...

  6. 使用mytop监控mysql

    mytop 是一个不错的实时查看mysql 状态的命令行工具,使用简单 安装 yum install -y mytop 环境准备 docker-compose 创建服务 version: " ...

  7. requests获取图片的宽和高

    try: if cover: resp = requests.get('%s?x-oss-process=image/info' % (url), timeout=30) if resp.status ...

  8. Centos7将本地源更换为网易源

    百度搜索: 网易源  点击进入网易开源镜像站 1. 备份当前 repo 文件 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS- ...

  9. CF1194F Crossword Expert(数论,组合数学)

    不难的一题.不知道为什么能 $2500$…… 不过场上推错了一直不会优化…… 首先考虑 $f_i$ 表示恰好做完前 $i$ 道题的概率. 这样很难算.修改一下,$f_i$ 表示做完至少 $i$ 道题的 ...

  10. [LeetCode] 124. Binary Tree Maximum Path Sum 求二叉树的最大路径和

    Given a non-empty binary tree, find the maximum path sum. For this problem, a path is defined as any ...