原则一: 继承不如指定
原则二: #id > .class > 标签选择符
原则三:越具体越强大
原则四:标签#id >#id ; 标签.class > .class

CSS优先级权重计算法

CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数!

根据这四个级别出现的次数计算得到CSS的优先级。

CSS优先级的计算规则如下:
* 元素标签中定义的样式(Style属性),加1,0,0,0
* 每个ID选择符(如 #id),加0,1,0,0
* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
* 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,
然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。

例子:
css文件或<style>中如下定义:
1. h1 {color: red;}
/* 一个元素选择符,结果是0,0,0,1 */
2. body h1 {color: green;}
/* 两个元素选择符,结果是 0,0,0,2 */
3. h2.grape {color: purple;}
/* 一个元素选择符、一个Class选择符,结果是 0,0,1,1*/
4. li#answer {color: navy;}
/* 一个元素选择符,一个ID选择符,结果是0,1,0,1 */
元素的style属性中如下定义:
h1 {color: blue;}
/* 元素标签中定义,一个元素选择符,结果是1,0,0,1*/

如此以来,h1元素的颜色是蓝色。
注意:
1、!important声明的样式优先级最高,如果冲突再进行计算。
2、如果优先级相同,则选择最后出现的样式。
3、继承得到的样式的优先级最低。

关于CSS的优先级,CSS优先级计算的更多相关文章

  1. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  2. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  3. 举例详解CSS中的的优先级

    计算优先级 优先级是根据由每种选择器类型构成的级联字串计算而成的.他是一个对应匹配表达式的权重. 如果优先级相同,靠后的 CSS 会应用到元素上. 注意:元素在文档树中的位置是不会影响优先级的优先级顺 ...

  4. CSS 从入门到放弃系列:CSS的选择器和优先级

    CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...

  5. CSS介绍&amp;选择器&amp;选择器优先级

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 '''se ...

  6. 从webkit内核简单看css样式和css规则优先级(权重)

    目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...

  7. CSS选择器整理以及优先级介绍

    一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...

  8. z-index、display、selector选择器优先级css优先级面试用到

    z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...

  9. CSS的继承与优先级

    CSS样式继承性 body,div,p{} html文档可以上图的种种节点树的形式表示,css层叠样式表中的各元素也有这种对应关系 <body>是文档中最大的根节点,body中的所有元素都 ...

  10. CSS样式定义的优先级顺序总结

    CSS样式定义的优先级顺序总结 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其中样式表又有: 类选择器 < 类派生选择器 < ID选择器 & ...

随机推荐

  1. SharePoint 2013 配置Excel Services

    前言:本文主要介绍如何启用SharePoint 2013版本Excel Services服务,并配置Excel Web Access部件,使Excel文档可以显示在Web页面中. 简单说一下流程,Sh ...

  2. 隐藏tabbar的属性hidesBottomBarWhenPushed

    项目中有需求是A视图控制器push之后B视图控制器需要隐藏底部的tabbar,在pop之后A视图控制器仍然显示tabbar. 其实不需要在push操作时敲 self.hidesBottomBarWhe ...

  3. INotifyPropertyChanged, Interface

    Data Object(class) impliment INotifyPropertyChanged; then the Object can update BindingSource. Impli ...

  4. GJM : Unity3D 常用网络框架与实战解析 【笔记】

    Unity常用网络框架与实战解析 1.Http协议          Http协议                  存在TCP 之上 有时候 TLS\SSL 之上 默认端口80 https 默认端口 ...

  5. 第5章 Web自动化测试

    5.1 Selenium简介 5.1.1 自动化测试简介 5.1.2 Selenium简介 5.2 Selenium2环境搭建 5.3 Java基础 5.3.1 新建Java工程和类 5.3.2 Ec ...

  6. Ruby自学笔记(二)— Ruby的一些基础知识

    Ruby安装好之后,我们就可以来实践Ruby语言了. 以下是一些学习到的简单基础知识: 1. 如何执行Ruby文件? 我们编写的Ruby文件是以rb为后缀名的,例如:XXX.rb.当要执行ruby文件 ...

  7. Unknown/unsupported storage engine: InnoDB

    症状:无法启动mysql,在“mysql数据库目录/主机名.err”日志文件中报错 Unknown/unsupported storage engine: InnoDB原因:MySQL5.5.8 GA ...

  8. winserver2008r2 + iis7安装django

    同样网上看了无数教程,但总是这个错一点那个错一点点的结果就一直没成功然后逞着今天空了那么一下午下定决定再折腾下把django跑起来,解决了静态文件问题为了方便以后复制粘贴,就全文字,嘿嘿 废话不说,接 ...

  9. 实现ajax的步骤

    实现ajax的步骤 1.创建xmlHttprequest对象 function createXmlHttpRequest(){ var xmlHttp; try{ //Firefox, Opera 8 ...

  10. 一个shell脚本给客户使用服务器生成一个序列号

    #!/bin/bash interface=`ls /sys/class/net|grep en|awk 'NR==1{print}'` if [ ! -e /etc/adserver/.seq.in ...