样式的优先级取决于特殊性,特殊性为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. kafak 命令使用

    本篇文章主要内容: kafka常用命令总结 一.kafka常用命令总结: 1.创建topic bin/kafka-topics.sh --create --zookeeper ip:port/chro ...

  2. 使用jsoup解析html页面内容案例

    public String getFaGuiKuTitles(String type, int page) { String href = "http://info.qd-n-tax.gov ...

  3. ural 1613 For Fans of Statistics

    #include <cstdio> #include <cstring> #include <map> #include <vector> #inclu ...

  4. 模糊语意变数、规则和模糊运算--AForge.NET框架的使用(二)

    原文:模糊语意变数.规则和模糊运算--AForge.NET框架的使用(二) 语意变数(Linguistic Variable) 语意变数存储了数个语意量(标签),每个语意量包含一个识别名和模糊集合.在 ...

  5. git仓库迁移和更新远程仓库地址

    一.git仓库迁移 1,从原仓库clone或pull到本地仓库 git clone project_name ​[old_remote_repository_address] 2,​在新的git创建一 ...

  6. jquery获取表格中特定列

    jQuery().text() 如果有一个表格,我们要用jquery获取特定列,则需要修改列的索引值就好了,此句代码获取的是页面的第10列

  7. 黑马程序员_JavaIO流(四)

    File概述 File类 用来将文件或者文件夹封装成对象. 方便对文件与文件夹的属性信息进行操作. File对象可以作为参数传递给流的构造函数. 了解File类中的常用方法. 字段:static St ...

  8. cf581C Developing Skills

    Petya loves computer games. Finally a game that he's been waiting for so long came out! The main cha ...

  9. 使用MapReduce查询Hbase表指定列簇的全部数据输出到HDFS(一)

    package com.bank.service; import java.io.IOException; import org.apache.hadoop.conf.Configuration;im ...

  10. Chrome真机调试步骤

    确保手机端打开USB调试选项 手机安装chrome 手机访问网页(或者打开APP,或者使用夜深模拟器打开APP或者网页) PC chrome打开chrome://inspect/#devices 点击 ...