其实,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. docker基本原理

    写的很不错的文章,作个存档 什么是容器 容器是 种轻量级.可移植的为应用程序提供了隔离的运行空间 .每个容器内都包含一个独享的完整用户环境,并且 个容器内的环境变动不会影响其他容器的运行环境,可以使应 ...

  2. Linux系统启动和内核管理

    Linux组成 由 kernel 和 rootfs 组成 单内核:(进程管理,内存管理,网络管理, 驱动程序,文件系统, 安全功能) /boot/vmlinuz-VERSION-release 辅助的 ...

  3. wxPython:事件处理一

    事件处理是wxPython程序工作的基本机制,先看几个术语: 事件(event):应该程序期间发生的事情,要求有一个响应. 事件对象(event object):代表具体一个事件,包括事件的数据属性, ...

  4. 快学Scala 1

      1. Scala解释器读到一个表达式,对它进行求值,将它打印出来,接着再继续读下一个表达式.这个过程被称作“读取-求值-打印-循环”,即REPL.   2. 从技术上来讲,scala程序并不是一个 ...

  5. su - 和su的区别

    su root和su - root: su只是切换了root身份,但Shell环境仍然是普通用户的Shell:而su -连用户和Shell环境一起切换成root身份了 推荐使用su - .

  6. 进程间通信IPC机制和生产者消费者模型

    1.由于进程之间内存隔离,那么要修改共享数据时可以利用IPC机制 我们利用队列去处理相应数据 #管道 #队列=管道+锁 from multiprocessing import Queue # q=Qu ...

  7. Python 深浅copy 和文件操作

    深浅copy 1,先看赋值运算. l1 = [1,2,3,['barry','alex']] l2 = l1 l1[0] = 111 print(l1) # [111, 2, 3, ['barry', ...

  8. watch的几种用法

    https://www.cnblogs.com/hity-tt/p/6677753.html . 亲测无误

  9. nodejs+mysql入门实例(表的查询)

    //连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ host: '******', //数据 ...

  10. podofo 一点小分享

    PDF 的开源库,大多是Java,或C#的,但C++也有一个很不错的PDF开源库:PoDoFo 我司的PDF签章产品中,我就是用这个PoDoFo库来做的底层 但是国外开源库对中文支持都是或多或少有点问 ...