关键词：
原文：http://www.cnblogs.com/wangfupeng1988/p/4285251.html
另外，w3c有文章介绍了CSS选择器的特定性，见https://www.w3.org/TR/css3-selectors/#specificity
1. 引言
上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。
上图中，css中的两个选择器都是针对<span>的，而且两个设置的颜色不一样，这里的<span>到底听从谁的命令？
上面还是比较简单的，下面在来一个复杂的：
上图中的<li>该显示成什么颜色呢？
2. 特指度
要解决以上问题，我们需要引入一个概念——特指度（specificity）。特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。
这个计算叫做“I-C-E”计算公式，
- I——Id；
- C——Class；
- E——Element；
即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。
下面举几个css表达式的特指度计算结果，大家也自己算一算，是不是对：
|
CSS选择器表达式 |
特指度计算结果 |
|
p |
1 |
|
p.large |
11 |
|
P#large |
101 |
|
div p#large |
102 |
|
div p#large ul.list |
113 |
|
div p#large ul.list li |
114 |
还有一个重点要注意：!important优先级最高，高于上面一切。* 选择器最低，低于一切。
好了，你现在可以返回文章一开始提出的两个问题，根据特指度计算公式计算，哪个的计算结果大，浏览器就会以哪个为优先。
3. 简版规则
如果你嫌上面的计算过于复杂，有一个简版规则。它只有三个规则，这三个规则能覆盖大多数情况，而且比较好记。
规则一，包含ID的选择器胜过包含Class的选择器，包含Class的选择器胜过包含元素的选择器；例如下图，第一个特指度更高：
规则二，不同选择器的特指度比较时，不区分加载的顺序（相同选择器在层叠时，后加载的覆盖前加载的），例如下图，虽然后加载，但是特指度低：
规则三，设置的样式高于继承的样式，不用考虑特指度。例如：
其实，大部分情况下，你通过这个简版的规则，即可判断选择器的优先级。
4. 亲身经历
wangEditor是我自己做的一个富文本编辑器，当我最开始在博客园上配置demo页面的时候，就遇到了css选择器优先级的问题，现在已经解决。Demo地址：http://www.cnblogs.com/wangfupeng1988/p/4198428.html
对于下来菜单，例如选择字体、字号等，我当时在wangEditor的css中是用Class来设置的，谁知道博客园页面中有一个既有的样式，优先级高于我的：
导致了我配置的demo中，ul的margin-left还是45px，而我写的css明明已经设置成了0px。原因就是博客园这个css选择器优先级要高于我写的优先级。
当然，后来我改成了id选择器，就改过了这个问题。
5. 总结
本节的内容是一个重点，我在许多的面试题中看到过考css优先级的问题。css优先级并不麻烦，只要你掌握了合适的方法来学习，一晚上就入门个差不多，祝君好运。
---------------------------------------------------------------
本系列的目录页面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html
css选择器的优先级-css选择器世界
1对于优先级的计算，数值计数法：每一段css语句的选择器都对应一个具体的数值，数值越大，优先级越高，其中的css语句将被优先渲染。其中：出现一个0级选择器，优先级数值+0；出现一个1级选择器，优先级数值+1；出现一个2... 查看详情
前端之css的属性引入方式选择器选择器优先级
目录1011前端之CSS的属性引入方式、选择器、选择器优先级一、CSS介绍二、CSS语法2.1CSS实例2.2CSS注释三、css属性的引入方式3.1行内样式3.2内部样式3.3外部样式四、CSS选择器4.1元素(标签)选择器4.2id选择器4.3类选择器4.4通用选择器4.5... 查看详情
css中选择器优先级与!important权重使用
原文:CSS中选择器优先级与!important权重使用CSS中的选择器优先级与!important权重使用#.class选择器要高于标签选择器。#id选择器要高于.class选择器。标签选择器是优先级最低的选择器。!important的属性它的权重值优先级最高的，大于... 查看详情
css选择器世界
CSS选择器世界CSS选择器的分类与优先级css选择器分为四类：选择器、选择符（后代关系的空格、>、+、~、||）、伪类、伪元素（::before、::after、::first-letter等）。css的优先级:css的优先级有很多划分方法，所有的方法其实都大同... 查看详情
css选择器的优先级
1.首先介绍一下CSS内联 内联css也叫做行级css或行内css，它是直接在标签内使用1<body>2<spanstyle="color:red;">我是span块</span>3</body>2.各种选择器标签选择器：点击这里了解标签选择器ID选择器：点击这里了解ID选择... 查看详情
css选择器的优先级
!important作为优先级最高的选择器,在样式仍然有冲突的情况下,依旧要按照优先级顺序进行比较 -----选择器优先级顺序为: !important>行内样式>ID选择器>类选择器、伪类选择器>元素、为元素、属性选择器>通配... 查看详情
css选择器优先级总结
CSS三大特性——继承、优先级和层叠。继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。css选择符分类 首先来看一下css选择符(css选择器)有... 查看详情
css的优先级选择器注意事项
CSS的优先级：内嵌样式>ID选择器>类选择器>标签选择器内部样式>内部样式>外部样式CSS的选择器：选择器：在CSS中，选择器是一种模式，用于选择需要添加样式的元素。1、基本选择器（如下：）：ID选择器：根据标签ID... 查看详情
css选择器优先级
1.CSS选择器判断过程：第一步：判断选择器的权重(多重组合样式同理，多个class<一个id);权重从大到小依次为:!import元素行内样式ID选择器伪类选择器/属性选择器>类选择器tag标签选择器*通配符继承第二步:同种类型的权重判断... 查看详情
csscss特性③(css优先级|优先级引入|选择器基本权重)(代码片段)
文章目录一、CSS优先级1、优先级引入2、选择器基本权重3、完整代码示例一、CSS优先级1、优先级引入定义CSS样式时,可能出现多个类型相同的规则定义在同一个元素上,如果CSS选择器相同,执行CSS层叠性,根据就近原则选择执行的样... 查看详情
前端学习--css--选择器的优先级
...冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。 优先级的规则 内联样式，优先级1000 id选择器，优先级100 类和伪类，优先级10 元素选择器，优先级1 通配*，优先级0 继承的... 查看详情
谁动了我的选择器？深入理解css选择器优先级(代码片段)
深入理解CSS选择器优先级😏序言🧐文章内容抢先看🤐一、基础知识1、为什么CSS选择器很强2、CSS选择器的一些基本概念（1）4种基本概念Ⅰ.选择器Ⅱ.选择符Ⅲ.伪类Ⅳ.伪元素（2）CSS选择器的命名空间&... 查看详情
css1
...||伪类：例如:hover伪元素：例如::before,::after2css选择器的优先级0级：通配符选择器、选择符和逻辑组合伪类(:not()、:is()、:where):不影响css优先级，逻辑组合伪类括号中的选择器会影响优先级1级：标签选择器2级:类选择器、属性选... 查看详情
css1
...||伪类：例如:hover伪元素：例如::before,::after2css选择器的优先级0级：通配符选择器、选择符和逻辑组合伪类(:not()、:is()、:where):不影响css优先级，逻辑组合伪类括号中的选择器会影响优先级1级：标签选择器2级:类选择器、属性选... 查看详情
有关css的选择器优先级以及父子选择器
css，又称样式重叠表，如今的网页的样式基本是div+css写出来的，功能十分强大，要想在html文件中引入css文件需要在<head></head>标签内输入一行：<link rel="stylesheet" type="text/css" href="XXX.css"> css的... 查看详情
css选择器优先级计算
选择器优先级： 抄录MDN的原话是：优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会... 查看详情
css选择器的优先级
其中！import不算做选择器，他只是把样式的优先级提高。 查看详情
css选择器的优先级
选择器的优先级表述为4个部分，用0,0,0,0表示。!important行间--1,0,0,0ID选择器--0,1,0,0类选择器(例如,.example)、属性选择器（例如, [type="radio"]）或伪类（例如,:hover）--0,0,1,0元素（例如,h1）和伪元素（例如,:before）--0,0,0,1通配选择... 查看详情