样式的优先级取决于特殊性,特殊性为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. Python自动化运维之8、正则表达式re模块

    re模块 正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串,在文本处理方面功能非常强大,也经常用作爬虫,来爬取特定内容,Python本身不支持正则,但是通过导入re模块,Python ...

  2. Dapper试用简例

    1.选择3.5以上框架在新建项目中引用Dapper.dll. 2.在后台写代码,代码写出来后感觉以前学的都白学了. 3. using Dapper; using System; using Syste ...

  3. mysql优化 - mysql 的 hint

    FORCE INDEX 强制索引 只使用建立在field1上的索引,而不使用其它字段上的索引. SELECT * FROM table1 FORCE INDEX (field1) IGNORE IND ...

  4. d3可视化实战00:d3的使用心得和学习资料汇总

    最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得.之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了 ...

  5. target vs currentTarget, clientWidth vs offsetWidth

    width: document < window(browser) < screen document--> clientWidth < offsetWidth(include ...

  6. Attach file to database

    D:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA databaseName.mdf databaseName.l ...

  7. linux中fork()函数

    man fork: FORK() Linux Programmer's Manual FORK(2) NAME fork - create a child process SYNOPSIS #incl ...

  8. HDOJ(HDU) 1563 Find your present!(异或)

    Problem Description In the new year party, everybody will get a "special present".Now it's ...

  9. Html5 Canvas Hit Testing

    名词解释: Shape : 矢量图形,点线面之类的: Hit Testing : 点击测试: 参考内容: A Gentle Introduction to Making HTML5 Canvas In ...

  10. Android中Intent的使用

    1./以下是常用到的Intent的URI及其示例,包含了大部分应用中用到的共用Intent. //一.打开一个网页,类别是Intent.ACTION_VIEW Uri uri = Uri.parse( ...