样式的优先级取决于特殊性,特殊性为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. C++Primer charpter1.

    一.输入输出流 endl:会刷新buffer.刷新之后你才能看到.不手动用endl的话,就只能依靠系统自动刷.程序崩溃的话,你看到的调试信息可能是错误的. >>:   两个连续的符号 ci ...

  2. c语言输入一行未知个数数字存入数组

    一直有个疑问输入一行数字存入数组时若不知道数字的个数怎么办,最容易想到的办法就是接收字符然后转化为数字,但这样太过麻烦. 今天上网查了下,说可以用ungetc()函数将字符送回输入流,在这里总结归纳一 ...

  3. 关于机器学习-EM算法新解

    我希望自己能通俗地把它理解或者说明白,但是,EM这个问题感觉真的不太好用通俗的语言去说明白,因为它很简单,又很复杂.简单在于它的思想,简单在于其仅包含了两个步骤就能完成强大的功能,复杂在于它的数学推理 ...

  4. 转:Spine.JS+Rails重客户端Web应用技术选型思路:『风车』架构设计

    原文来自于:http://www.infoq.com/cn/articles/fengche-co-architecture 风车这个项目开始于 2011 年 11 月份,之前叫做 Pragmatic ...

  5. 怎样卸载goldengate

    1. Log on to the database server (as oracle) where the GoldenGate software isinstalled.2. Change dir ...

  6. Android 之Service

    service是运行在后台的服务,你可以启动一个服务Service来播放音乐,或者记录你地理信息位置的改变,或者启动一个服务来运行并一直监听某种动作. 接下来分析一下service 的生命周期: 1: ...

  7. AcitonBar 自定义布局

    Android系统中ActionBar默认的布局不美观且难于控制,通过为ActionBar自定义布局的方式可以灵活控制ActionBar. 自定义Activity主题和ActionBar样式 在新建的 ...

  8. linux 信号signal和sigaction理解

    今天看到unp时发现之前对signal到理解实在浅显,今天拿来单独学习讨论下. signal,此函数相对简单一些,给定一个信号,给出信号处理函数则可,当然,函数简单,其功能也相对简单许多,简单给出个函 ...

  9. fuel部署openStack

    https://code.launchpad.net/fuel [fuel项目] http://www.imgburn.com/ [各种镜像制作工具]

  10. D - Network - poj3694(LCA求桥)

    题意:有一个网络有一些边相互连接,现在有Q次操作,求每次操作后的桥的个数 分析:开始竟然不知道还有LCA这么个东西....... *********************************** ...