我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结。

css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源。这个过程就称为层叠。——《css权威指南》

如下图,css规则由选择器和声明块组成,写在选择器后面大括号里的就叫声明。

一、样式类型
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">

例子汇总html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器的权重与优先规则?</title>
<style>
.demo{
    width:1000px;
    border:1px solid #eee;
    margin:0 auto;
}
a {color:red;}
</style>
<link rel="stylesheet" rev="stylesheet" href="css/style1.css" type="text/css" />
<link rel="stylesheet" rev="stylesheet" href="css/style2.css" type="text/css" />
</head>
<body>

<div class="demo">
    <a href="#" style="color:yellow;">11111111</a>
</div>

</body>
</html>

style1.css

a {color:blue;}

style2.css

a {color:green;}

不同情况说明:一种四种情况都设置了a的样式,看看优先级情况;

1.当只有2个外联样式时:style2.css > style1.css   

显示绿色:

说明样式相同情况下,样式表是从上向下执行的。

2.当有外部和内联情况下

显示绿色:

说明内联和外面,样式相同情况下,样式表是从上向下执行的。

注意:经常有错觉,内联大于外部,那是我们内部经常加到外部下面,覆盖掉了外部的。

3.当有外部,内联,行间时:

显示:黄色

说明:行间权重最高。

二、选择器类型
  1、ID  #id
  2、class  .class
  3、标签  p
  4、通用  *
  5、属性  [type="text"]
  6、伪类  :hover
  7、伪元素  ::first-line
  8、子选择器、相邻选择器

三、权重计算规则
    第一等:代表 内联样式,如: style=””,权值为:1000。
    第二等:代表 ID选择器,如:#content,权值为:0100。
    第三等:代表 类,伪类和属性选择器,如: .content , :hover , [type="text"] 权值为:0010。
    第四等:代表 标签选择器和伪元素选择器,如:  p ,::first-line 权值为:0001。
    通配符、子选择器、相邻选择器等的。如: *、>、+,权值为:0000。
    继承的样式没有权值,通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
    最后比较特殊的一个标志!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。

例如:以下规则中选择器的特殊性分别是:

1  style="color: yellow;"                      /*特殊性:1000*/
2  #demo a{color: orange;}                     /*特殊性:100+1=101*/
3  div#demo a{color: red;}                     /*特殊性:1+100+1=102*/
4  .demo a{color: black;}                      /*特殊性:10+1=11*/
5  div a{color: green;}                        /*特殊性:1+1=2*/
6  .demo input[type="text"]{color: blue;}      /*特殊性:10+1+10=21*/
7  .demo *[type="text"]{color: grey;}          /*特殊性:10+0+10=20*/

变态情况:鑫大神的例子256个class类名选择器干掉一个id选择器实例页面

http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html

四、比较规则
    1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较,前一等级相等才往后比。
    无论是行间、内部和外部样式,都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式;ID>class>元素。
    在权重相同的情况下,后面的样式会覆盖掉前面的样式。
    通配符、子选择器、相邻选择器等的。虽然权值为0000,但是也比继承的样式优先。

五、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器的权重与优先规则?</title>
<style>
a{color: yellow;} /*1*/
div a{color: green;} /*2*/
.demo a{color: black;} /*11*/
.demo a[title]{color: blue;} /*21*/
.demo *[title]{color: grey;} /*20*/
#demo a{color: orange;} /*101*/
div#demo a{color: red;} /*102*/
</style>
</head>
<body>

<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div><a href="">第二条应该是绿色</a></div>
<div class="demo">
    <a href="">第三条应该是黑色</a><br/><!--适用第1、2、3行规则,第3行优先级高-->
    <a href="" title="#">第四条应该是蓝色</a><br/><!--适用第4、5行规则,第4行优先级高-->
    <p title="#">第五条应该是灰色</p><!--适用第4、5行规则,第5行适用-->
</div>
<div id="demo">
    <a href="">第七条应该是红色</a><!--适用第6、7行规则,第7行优先级高-->
</div>

</body>
</html>

显示:

CSS选择器的权重与优先规则?的更多相关文章

  1. CSS选择器的权重与优先规则

    权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”.   原文:http://w ...

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

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

  3. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  4. CSS:权重和层叠规则决定了其优先级

    首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...

  5. css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先

    CSS选择器:基本可以分为通配选择器,标签选择器,类选择器,ID选择器,简单属性选择,具体属性选择,根据部分属性值选择,特定属性选择,从结构上来分还有后代选择器,子元素选择器,相邻兄弟选择器以及伪类. ...

  6. CSS选择器从右向左的匹配规则

    CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...

  7. css:id选择器的权重&gt;class选择器的权重=属性选择器的权重&gt;元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

  8. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

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

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

随机推荐

  1. SpringMVC org.xml.sax.SAXParseException: cvc-complex-type.2.4.c 报错处理方式

    使用SpringMVC的过程中需要访问静态文件,即在spring-servlet.xml文件中添加了 <mvc:default-servlet-handler /> 标签,以开启Sprin ...

  2. 【Java并发编程实战】-----&ldquo;J.U.C&rdquo;:ReentrantLock之三unlock方法分析

    前篇博客LZ已经分析了ReentrantLock的lock()实现过程,我们了解到lock实现机制有公平锁和非公平锁,两者的主要区别在于公平锁要按照CLH队列等待获取锁,而非公平锁无视CLH队列直接获 ...

  3. 利用python合并两个文件

    1格式如下 在做利用zabbix的api来批量添加主机的时候,需要处理ip和hostname,在借用别人写的py程序的基础上,自己有改装了以下脚本,为自己使用.需要时ip和hostname为一个统一格 ...

  4. js延迟3秒后跳转

    setTimeout("location.href='onlineUser/login'",3000);

  5. oracle 删除用户时的坑

    ORACLE在使用 SELECT SID,SERIAL# FROM V$SESSION WHERE USERNAME='dt_zntg_trade' 删除会话时,一定要注意dt_zntg_trade的 ...

  6. c语言是如何实现泛型链表

    最近有看一点Linux内核源码,发现内核里大量使用了list_head结构体.百度查了一下,原来内核利用这个结构体实现了泛型. 自认为对链表已经很熟悉的我,决定自己实现一下. 下面以Node和list ...

  7. [NOIP摸你赛]Hzwer的陨石(带权并查集)

    题目描述: 经过不懈的努力,Hzwer召唤了很多陨石.已知Hzwer的地图上共有n个区域,且一开始的时候第i个陨石掉在了第i个区域.有电力喷射背包的ndsf很自豪,他认为搬陨石很容易,所以他将一些区域 ...

  8. LeetCode——Contains Duplicate III

    Description: Given an array of integers, find out whether there are two distinct indices i and j in ...

  9. android最佳实践之设备兼容性

    由于不同手机的尺寸大小,屏幕分辨率可能存在差异.在开发应用的时候,你或许遇到过这些的问题: 1, 为什么图片在另外的手机上显示的时候变小了,又或是缩小了? 2, 为什么在layout中定义好的格局在另 ...

  10. phalcon: crypt-encrypt/decrypt用法

    phalcon:crypt加密与解密 可以在入口文件index.php进行配置,也可以不配置: $di->set('crypt', function(){ $crypt = new \Phalc ...