选择器的特殊性
  选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如0,0,0,0,0
  一个选择器的具体特殊性如下确定
  1、对于选择器给定的ID属性值,加0,1,0,0
  2、对于选择器中给定的各个类属性,属性选择,或伪类,加0,0,1,0
  3、对于选择器中给定的各个元素和伪元素,加0,0,0,1
  4、通配符的选择器的特殊性为0,0,0,0
  5、结合符对选择器特殊性没有一点贡献
  6、内联声明的特殊性都是1,0,0,0
  7、继承没有特殊性 

  总结:
  内联样式,优先级1000
  id选择器,优先级100
  类和伪类,优先级10
  元素选择器,优先级1
  通配符,优先级0
  继承的样式,没有优先级

  当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后再比较,

  但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式

  并集的选择器的优先级是单独计算

  特殊性1,0,0,0大于所有的以0开头的特殊性(不进位)
  选择器的特殊性最终都会授予给其对应的声明
  如果多个规则与同一个元素匹配,而且有些声明互相冲突时,特殊性越大的越占优势

  注意:id选择器和属性选择器
  div[id="test"](0,0,1,1) and #test(0,1,0,0)
  重要声明
  有时某个声明比较重要,超过了所有的其他声明,css2-1就称之为重要声明
  并允许在这些声明的结束分号之前插入!important来标志
  必须要准确的放置!important 否则声明无效
  !important总是要放在声明的最后,即分号的前面

  标志位!important的声明并没有特殊性值,不过要与非重要声明分开考虑
  实际上所有的重要声明会被浏览器分为一组,重要声明的冲突会在其内部解决(然后再去判断选择器的优先级)
  非重要声明也会被分为一组,非重要声明的冲突也会在其内部解决
  如果一个重要声明与非重要声明冲突,胜出的总是重要声明

  继承
  继承没有特殊性,甚至0特殊性都没有
  0特殊性要比无特殊性来的强
  来源
  css样式的来源大致有三种
  创作人员
  读者
  用户代理

  权重:
  读者的重要声明(用户,就是直接在浏览器写的样式)
  创作人员的重要声明
  创作人员的正常声明
  读者的正常声明
  用户代理的声明(浏览器)

  层叠
  1.找出所有的相关规则,这些规则都包含一个选择器
  2.计算声明的优先级
  先按来源排序
  再按选择器的特殊性排序
  最终按排序

css声明的优先级的更多相关文章

  1. css声明应用优先级

    1.特殊性 选择器的特殊值由四部分组成:0,0,0,0 第一位预留给内联样式   <h1 style="color:red;"></h1> 第二位属于ID选 ...

  2. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  3. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  4. css权重及优先级问题

    css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...

  5. [程序猿入行必备]CSS样式之优先级

    专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...

  6. css层叠样式优先级总结

    虽然学前端最刚开始就是html+css,一直因为这些看起来太简单就没有什么总结,不过看似很简单的东西,研究起来也深不可测,问起来js可能回答的头头是道,css这么简单的东西,其中一个优先级的问题就能难 ...

  7. Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  8. css---6 选择器声明的优先级

    选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如 0,0,0,0一个选择器的具体特殊性如下确定: 1.对于选择器中给定的ID属性值,加 0,1,0,0 2.对于选择器中给定的各个类属性 ...

  9. CSS样式之优先级

    说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级:     内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...

随机推荐

  1. nexus3使用docker运行/创建docker私有仓库/maven私有仓库

    version: '3.2' services: nexus3: container_name: nexus3 hostname: nexus3 image: sonatype/nexus3:3.14 ...

  2. 目标反射回波检测算法及其FPGA实现 之一:算法概述

    目标反射回波检测算法及其FPGA实现之一:算法概述 前段时间,接触了一个声呐目标反射回波检测的项目.声呐接收机要实现的核心功能是在含有大量噪声的反射回波中,识别出发射机发出的激励信号的回波.我会分几篇 ...

  3. TCP交互流程

    前言:在FPGA上实现TCP协议实际是一个不太好的计划,因为FPGA最擅长的是流水线处理方式,而TCP存在交互,导致FPGA需要进行反馈式的处理.但是由于项目新增的附加要求而又只能在FPGA上去实现T ...

  4. [BZOJ2127]happiness-[网络流-最小割]

    Description 传送门 Solution 按照最小割的思路考虑. 根据题意,当两个人都选文(理),需要砍掉两个人都选理(文)的加成:如果两个人选的不一样,就要都砍掉. 这是一个网络流建模的套路 ...

  5. 基于 OpenCV 的人脸识别

    基于 OpenCV 的人脸识别 一点背景知识 OpenCV 是一个开源的计算机视觉和机器学习库.它包含成千上万优化过的算法,为各种计算机视觉应用提供了一个通用工具包.根据这个项目的关于页面,OpenC ...

  6. KVM虚拟化的安装

    kvm介绍 一.KVM的历史 Kvm在2007年2月正式合并Linux2.6.20核心中,成为内核源代码的一部分.2008年9月4日,RedHat公司收购了Qumranet,开始在RHEL中用kvm取 ...

  7. Apache入门篇(四)之LAMP架构部署

    一.LAMP解析 a: apachem: mariadb, mysqlp: php, perl, python 静态资源:静态内容:客户端从服务器获得的资源的表现形式与原文件相同:动态资源:通常是程序 ...

  8. 初始CSS模板

    /*开始 初始CSS模板 开始*/ body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4 ...

  9. Electron小记

    一.安装 1.安装NodeJS 2.安装electronjs:npm install -g electron --unsafe-perm=true --allow-root 安装完,环境为: Node ...

  10. Spring学习(六)-----Spring使用@Autowired注解自动装配

    Spring使用@Autowired注解自动装配 在上一篇 Spring学习(三)-----Spring自动装配Beans示例中,它会匹配当前Spring容器任何bean的属性自动装配.在大多数情况下 ...