样式的优先级取决于特殊性,特殊性为0,0,0,0

Ø每个元素或伪元素选择器贡献特殊性为 0,0,0,1
Ø每个类、伪类或者属性选择器的特殊性为 0,0,1,0
Ø每个ID选择器的特殊性为 0,1,0,0
Ø行内样式的特殊性为 1,0,0,0
Ø结合符和通配符的对特殊性为0,而继承没有特殊性
 

比较规则

Ø从左向右依次比较,数字大的则优先级更高
Ø每个级别的优先级值是相互独立的,13个元素选择器也不会比1个类选择器的特殊性高
Ø如果相同就比较下一位,所有位都相同则优先级是一样高
Ø当选择器优先级一样高的时候后声明的样式会覆盖前面声明的样式
 
 

例子:

div ul li                                     0,0,0,3

div.aside ol li                             0,0,1,3

a:hover                                     0,0,1,1

div.nav a:hover                          0,0,2,2

h1#title em                               0,1,0,2

input[type="text"]                      0,0,1,1

.affix.top                                   0,0,2,0

*                                              0,0,0,0

CSS特殊性的更多相关文章

  1. 小记:css特殊性

    今天早上遇到了个小bug,刚好用从css权威指南学到的知识解决了 html结构 <ul class="portlet-nav"> <li><a id= ...

  2. CSS 特殊性、继承与层叠

    一.特殊性规则 选择器的特殊性由选择器本身的组件确定:特殊性由四个部分组成,其初始值为0,0,0,0. 1.    对于选择器中的每一个id,记0,1,0,0: 2.    对于选择器中的每一个类.伪 ...

  3. CSS特殊性值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 记录:CSS特殊性——权值规则

    浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:r ...

  5. CSS选择器的特殊性和LOVE HA

    在CSS中当几个相同的选择器对同一个元素有不同的规则时,该怎么应用这些规则呢? 答案就是:CSS特殊性(CSS specificity) 选择器特殊性有选择器本身组成,特殊性由4个数值表述:0, 0, ...

  6. CSS Specificity(特殊性)

    CSS的特殊性是非常重要却又经常被忽视的属性,特别是在团队合作下的产品迭代开发中,因为不注重CSS的特殊性最后导致某些代码混乱不堪,这里就把自己对CSS特殊性的认识做一些归纳总结. CSS的特殊性(s ...

  7. CSS基础(02)

    CSS 选择器 1.CSS3 选择器简介 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 语法: 下面中"CSS" 列指示该属性是在哪个 CSS 版本中定义的.(C ...

  8. CSS 高级

    1.CSS 盒模型(Box Model) 所有 HTML 元素都可以看作是盒子,在 CSS 中,“Box Model”这一术语主要是在布局时使用. CSS 盒模型(Box Model)规定了处理元素内 ...

  9. css知识总结

    ---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...

随机推荐

  1. FileWriter

    package file; import java.io.File; import java.io.FileWriter; import java.io.IOException; public cla ...

  2. 避免Block的循环引用

    避免Block的循环引用 什么是循环引用,什么时候发生循环引用 1 循环引用就是当self 拥有一个block的时候,在block 又调用self的方法.形成你中有我,我中有你,谁都无法将谁释放的困局 ...

  3. Google Chrome快捷键大全

    信很多朋友在使用过Google Chrome之后,就会不想回到原先使用的浏览器了,尤其是IE.没错Google Chrome的优点很多,已经获得了一大部分网友们的用户,软件志现在也是Firefox+C ...

  4. hibernate 映射<四>多对一双向映射

    学生和班级的例子来说,多个学生可以对应一个班级. 1.站在学生角度来说,学生就是多端.那么我们可以通过多对一来维护2者的关系. 2.站在班级的角度来说,班级就是一端.那么我们可以通过一对多啦维护2者的 ...

  5. HDU_2051——十进制到二进制转换

    Problem Description Give you a number on base ten,you should output it on base two.(0 < n < 10 ...

  6. HDOJ 2191

    多重背包. 模版. #include <iostream> #include <stdio.h> #include <stdlib.h> #include < ...

  7. java中paint repaint update 之间的关系

    最近总结了一下java中的paint,repaint和updata三者之间的关系,首先咱们都知道用paint方法来绘图,用repaint重绘,用update来写双缓冲.但是他们之间是怎么来调用的呢,咱 ...

  8. JDBC远程从一个MySql数据库中的一张表里面读出数据(这个数据库需要用SSH隧道连接,大约8W条数据),然后分别插入到另一个数据库中的两张表里

    package com.eeepay.lzj.db; import java.sql.Connection; import java.sql.Date; import java.sql.DriverM ...

  9. FreeMarker---数据类型

    1.a.ftl 你好,${user},今天你的精神不错! ----------------------------- 测试if语句: <#if user=="老高"> ...

  10. (转)Linux整合apache和tomcat构建Web服务器

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://wenzhongxiang.blog.51cto.com/6370734/1285 ...