其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式;ID>class>元素。

一、样式类型

  1、行间

<h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>

  2、内联

<style type="text/css">
h1{font-size:12px;
color:#000;
}
</style>

  3、外部

<link rel="stylesheet" href="css/style.css">

二、选择器类型

  1、ID  #id

  2、class  .class

  3、标签  p

  4、通用  *

  5、属性  [type="text"]

  6、伪类  :hover

  7、伪元素  ::first-line

  8、子选择器、相邻选择器

三、权重计算规则

  1. 第一等:代表内联样式,如: style=””,权值为1000。
  2. 第二等:代表ID选择器,如:#content,权值为0100。
  3. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
  4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
  5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  6. 继承的样式没有权值。

四、比较规则

  1. 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较,前一等级相等才往后比。
  2. 无论是行间、内部和外部样式,都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式;ID>class>元素。之所以有这样的错觉,是因为确实行间为第一等的权重,所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后,所以覆盖掉了之前的。
  3. 在权重相同的情况下,后面的样式会覆盖掉前面的样式。
  4. 通配符、子选择器、相邻选择器等的。虽然权值为0000,但是也比继承的样式优先。

五、!important

  1. !important 的作用是提升优先级,换句话说。加了这句的样式的优先级是最高的(比内联样式的优先级还高)。

    <style>
    p{
    color:red !important;
    }
    </style>
    <p style="color:blue;">我显示红色</p>  
  2. ie7+和别的浏览器对important的这种作用的支持度都很好。只有ie6有些bug
    p{
    color:red !important;
    color:blue;
    }//会显示blue

    但是这并不说明ie6不支持important,只是支持上有些bug。看下面

    p{
    color:red !important;
    }
    p{
    color:blue;
    }
    //这样就会显示的是red。说明ie6还是支持important的。

六、实例

  1.  a{color: yellow;} /*特殊性值:0,0,0,1*/
    div a{color: green;} /*特殊性值:0,0,0,2*/
    .demo a{color: black;} /*特殊性值:0,0,1,1*/
    .demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/
    .demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/
    #demo a{color: orange;} /*特殊性值:0,1,0,1*/
    div#demo a{color: red;} /*特殊性值:0,1,0,2*/ <a href="">第一条应该是黄色</a> <!--适用第1行规则-->
    <div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则,第4行优先级高-->
    <a href="">第三条应该是黑色</a><!--适用第2、3行规则,第3行优先级高-->
    </div>
    <div id="demo">
    <a href="">第四条应该是红色</a><!--适用第5、6行规则,第6行优先级高-->
    </div>

本文是一个学习笔记。有什么不对的地方,希望大家指出。

参考

http://www.cnblogs.com/wangmeijian/p/4207433.html   By 王美建 from 博客园 原创文章

http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php   简明现代魔法

CSS 选择器权重计算规则的更多相关文章

  1. CSS 选择器权重计算规则(转)

    其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...

  2. CSS选择器权重计算规则

    从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. CSS选择器权重计算

    CSS各种选择器的权重: 1.ID选择器  +100 2.类.属性.伪类选择器   +10 3.元素.伪元素选择器   +1 4.其他选择器   +0 如果有两个CSS样式都作用于某元素,如: #id ...

  5. HTML+CSS基础 权重的计算 权重计算规则

    权重的计算 将选择器上面的选择器进行叠加,叠加后的总和就是该选择器的权重. 权重计算规则

  6. css系列,选择器权重计算方式

    CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器), 属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等. 在CSS中,权重决定了哪些CS ...

  7. 浏览器+css基础+选择器+权重+匹配规则

    浏览器的组成: shell+内核 shell:用户能看得到的界面就叫shell 内核:渲染rendering引擎和js引擎 现在主流拥有自己开发内核的浏览器:opera现在属于360和昆仑万维 CSS ...

  8. css选择器权重、样式继承、默认样式

    学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id   100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...

  9. CSS选择器的匹配规则

    css选择器是从右向左匹配的, 比如:.list a {color:blue;} 先解析到 a 标签,并将页面上所有 a 标签的字体颜色都按照 color:blue 进行渲染(蓝色),再解析到 .li ...

随机推荐

  1. synchronized同一把锁锁不同代码

    对于多线程,如果是计算密集型,多线程不一定优势:但如果是io密集型(因为速度慢),多线程多数情况下就有很大的优势了(但也不全是,因为当io已经满负荷运转下,即100%了,再增加线程,未必就会增加效率) ...

  2. (4.4)mysql备份还原——备份存储容灾基础知识

    存储知识 1.为什么需要存储,存储一般解决哪些问题? 容量.速度.易于管理.安全(容灾与备份).可扩展性 2.存储发展历史 [2.1]大型机 [2.2]c/s结构(客户端->服务器) [2.3] ...

  3. linux 查看系统资源使用情况:vmstat

    vmstat命令可以动态地查看系统资源的使用情况,如内存/交换分区/CPU的使用情况,通过使用该命令可以判断系统的瓶颈在哪里: [root@mysql ~]# vmstat procs ------- ...

  4. 林兴爆料小程序很快可以支持各个 App 直接打开小程序

    在微信开放平台基础高级产品经理林兴演讲的当场,他爆料了微信小程序一个轰动性新能力:小程序很快可以支持各个 App 直接打开小程序!没错,你没有听错,简单来说,在不久以后,所有的 App 里面都可以看到 ...

  5. css继承样式怎么控制?用选择器

    css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性.css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此 ...

  6. gitlab+jenkins多项目,多依赖,继承等上下级项目关系的自动部署

    案例: 现有三个项目,Common,entity,serviceAPIentity依赖于Common,serviceAPI依赖于entity,也就是说common的下级项目是entity,而entit ...

  7. 报错解决——SSL: CERTIFICATE_VERIFY_FAILED

    SSL: CERTIFICATE_VERIFY_FAILED Python 升级到 2.7.9 之后引入了一个新特性,当使用urllib.urlopen打开一个 https 链接时,会验证一次 SSL ...

  8. 反射入门-浅谈反射用途_根据Ado游标对象创建list集合

    本人大二菜鸟一只,今天在上课期间有个同学看着C#反射的内容说反射没什么用,一时之间也想不到什么更好的例子,就写了个根据泛型类型和游标反射创建List集合的Demo. 首先创建一个用于封装对应数据的en ...

  9. centos mysql安装 完全版

    在linux中安装数据库首选MySQL,Mysql数据库的第一个版本就是发行在Linux系统上,其他选择还可以有postgreSQL,oracle等 在Linux上安装mysql数据库,我们可以去其官 ...

  10. Centos7限速和测速

    限速 wondershaper是国外人开发的一款在Linux内核下基于TC工具的对整块网卡的限度工具. 第一种安装方法 首先下载wondershaper的rpm安装包:wondershaper-1.1 ...