CSS的优先级应该是作为CSS基本知识而广为知道的,所以CSS入门后,就一直把CSS的优先级记挂在心里(自觉告诉自己这地方很可能会摔跤)。起初可能是因为自己的项目经验不够丰富,或者是自己所接触到的项目都是小规模的前端,也或与自己书写CSS的习惯有关(自己基本上就是逐层书写CSS,尽量把代码写得干净整洁),CSS优先级并没有成为某次项目的绊脚石。直到某次项目,因为用到的CSS库与自己页面的设计稿有冲突,才再次重视起CSS的优先级。

  以下就将有关CSS的优先级的知识进行归纳整理:

  

  ①继承的不如指定的;②id>class>标签选择符;③越具体的样式越强大;④标签 id>id;标签 class>class。

  CSS优先级权重的计算方法:CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优  先级,规则如下:

    ①元素标签中定义的样式,加1000;

    ②每个ID选择符,加0100;

    ③每个Class选择符、每个属性选择符、每个伪类,加0010;

    ④每个元素选择符或伪元素选择符,加0001;

    将这四个数字分别累加,就得到每个CSS定义的优先级的值,然后从左到右逐位比较大小,数字大的CSS样式的优先级高。

  举例:

  假设对应example.html在example.css文件中定义如下样式:

  1. h1{color:red;}  /*一个元素选择符,结果为0001*/

2. body h1{color:green;} /*两个元素选择符,结果是0002*/

3. h2.grape{color:purple;} /*一个元素选择符、一个Class选择符,结果是0011*/

4. li#answer{color:navy;} /*一个元素选择符,一个ID选择符,结果是0101*/

  而同时在example.html中有:

  <style>

    h1{color:blue;}

  </style>   /*元素标签中定义,一个元素选择符,结果是1001*/

  1001是有关h1样式中计算最大的,所以h1元素的颜色应该是蓝色的。

  有关CSS优先级的计算就介绍到此。

  接下来介绍!important:

  

  !important声明的样式优先级最高。

  如何想更透彻掌握!important,如下博客链接可能会对你有所帮助:http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html

  

css的优先级以及!important的使用的更多相关文章

  1. 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG

    一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...

  2. 通过!important设置css样式优先级

    CSS写在不同的地方有不同的优先级,一般 .css文件中的定义 < 元素style中的属性,但是如果使用!important,则会变得不一样,使用!important的css定义是拥有最高的优先 ...

  3. css的优先级 和 权重问题 以及 !important 优先级

    css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...

  4. CSS中选择器优先级与!important权重使用

    CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...

  5. css优先级之important

    css优先级之important

  6. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  7. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  8. CSS样式优先级

    关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...

  9. 关于CSS的优先级,CSS优先级计算

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

随机推荐

  1. Unity Rigidbody 刚体中的Angular Drag和Freeze Position/Rotation

    Rigidbody中 Angular Drag  (角阻力):同样指的是空气阻力,只不过是用来阻碍物体旋转的.如果设置成无限的话,物体会立即停止旋转.如果设置成0,物体在上升过程中,会发生侧翻旋转. ...

  2. ubuntu(16.04.01)学习-day2--高级命令

    1.查找命令 find -name "hello.c" grep "test" grep "usb" -c -r /drivers/usb ...

  3. ZStack之ZDApp_Init解析

    [注:本文源自博客园http://www.cnblogs.com/cherishui/,为尊重劳动者成果,如需转载请保留此行] 以下代码分析基于ZStack-CC2530-2.5.1a,开发环境为 I ...

  4. C/C++编译过程理解【转】

    转载自:http://www.cppblog.com/woaidongmao/archive/2008/11/07/66254.aspx 今天,通过自己的努力终于对C/C++的编译过程有了个粗略的了解 ...

  5. Poj 2993 Emag eht htiw Em Pleh

    1.Link: http://poj.org/problem?id=2993 2.Content: Emag eht htiw Em Pleh Time Limit: 1000MS   Memory ...

  6. response返回随笔

    response.setHeader("Content-type", "text/html;charset=UTF-8");//这句话的意思,是让浏览器用utf ...

  7. GET 和 POST 两种方式来完成Http接口

    程序使用 HTTP 协议和服务器交互主要是进行数据的提交,通常数据的提交是通过 GET 和 POST 两种方式来完成,下面对这两种方式(.net c#)进行一下说明: 1. GET 方式. GET 方 ...

  8. 服务器迁移之debian重新配置Web服务的细节

    之前配置Linux服务器时采用的是Debian系统一直很稳定,这次准备迁移到新的服务器环境上,好在以前的配置我在博客都做了备忘,所以很容易就搞定了,这次服务系统采用的是最新的Debian 7.0,但是 ...

  9. 修改wamp的apache默认端口80以及www目录

    修改wamp的apache默认端口80以及www目录 以修改为8088端口和D:/workphp目录为例. 修改为8088端口 左键托盘图标,在“Apache”里可以直接打开httpd.conf,查找 ...

  10. ubuntu1304下安装boa服务器

    本测试在ubuntu1304下测试,具体步骤如下: 1下载源码:www.boa.org,可在ubuntu下自带的火狐浏览器下载,也可在window下下载,然后再移到ubuntu下: 2打开终端,将bo ...