『壹』 !important，权重问题
1.！important作用：
用来提升某个 直接选中标签的选择器 中某个属性的优先级的，可以将 被指定的属性 的优先级提升为最高
2.优先级的权重
作用：当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高
谁的id最多谁的优先级最高
id个数一样，再看类名个数，类名个数
类名个数一样，再看标签的个数
要是都一样，谁在后面按照哪个来
『贰』 CSS选择器的优先级
通常我们可以将CSS的优先级由高到低分为六组：
1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
5、第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。
最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。
另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如 #i100
*.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{}
，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。
如果想学习和交流更多html 前端开发的技术 你可以来我们这个群：先写下这三个数字：432，然后在写下中间这三个数字：664，最后写下的三个数字是：883，按照这个顺序连起来，群就会出现。还有更多的技术资料，学习课程。
CSS选择器是一个非常灵活的CSS属性，优雅的使用它会使你的页面代码不再臃肿，而且还可以作为hack的妙用方法之一。
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
3、第三级的优先属性由<link/>标签所引入的样式表定义。
4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式有用户设定。
最低级的优先权由浏览器默认。
理解了这些CSS优先级问题后，也就不必苦恼于样式定于中的此类问题了。
『叁』 CSS选择器、优先级以及!important知识总结
关于CSS选择器，首先请看这里： CSS 选择器参考手册
通过以上，我们可以将CSS选择器分为以下几种：
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
示例：
说明：以下E表示元素，attr表示属性，val表示属性的值。
说明：以下E表示元素
示例：
示例：
示例：
示例：
E:not(s) ,匹配不符合当前选择器的任何元素
示例：
E:target ,匹配文档中特定"id"点击后的效果
示例：
这里我们简单讨论下后代元素选择器和子元素选择器的区别
示例
CSS优先级是指CSS样式在浏览器中被解析的 先后顺序 。
多重样式（Mutiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是多重样式的使用情况。
一般情况下，（ 外部 样式）External style sheet <（ 内部 样式）Internal style sheet <（ 内联 样式）Inline style
例外 ：如果外部样式放在内部样式的后面，则外部样式将会覆盖内部样式。
示例：
给不同的选择器分配不同的权值
解释：
示例
结果：标签内的数据显示为蓝色。
比较样式的优先级是，只需统计不同选择器的个数，然后与对应的权值相乘即可。根据结果便可得出优先级。
看到这里，有些同学是不是对!important有点迷惑呀 为什么有了它，就优先级最高呐 下面我们再来详细讲一讲!important~
!important 是CSS1就定义的语法，作用是提高指定样式的应用优先权。
语法格式： {cssRule !important} ，即写在定义的最后面，例如： box { color: red !important}
声明了 !important 的样式，具有最高的优先级，相当于写在最下面（最后定义）
IE 6.0 不完全 支持!important
IE支持重定义中的!important，例如：
你将会发现定义了样式 class="yuanxin" 时，在IE下，字体显示为红色（#e00）。
但不支持同一定义中的 !important 。例如：
此时在IE6下不支持，你将会发现定义了样式 class="yuanxin" 时，字体显示为黑色（#000）。
解释 ：
important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为!important优先级较高，否则当含!important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为!important较低!
再举一个例子：
因为IE 6.0一直都不完全支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。
完。
总结内容参考以下：
w3school_CSS 选择器参考手册
阮一峰_CSS选择器笔记
css选择器优先级深入理解
CSS 的优先级机制[总结]
十分感谢你们的分享 n(*≧▽≦*)n
注：原文章首发于： CSS选择器、优先级以及!important知识总结 ，现迁移至此。
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
『肆』 css选择器的优先级
就是根据定义的前后顺序来的，后面的优先于前面的
比如：
.aaa{width:100px;}
.aaa{width:200px;}
.bbb{width:300px;}
<div class="aaa bbb"></div>
这个div只会引用到最后一个width:300px
『伍』 6.前端选择器的优先级
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。
div , p , #p1 , .hello{}
可以在样式的最后，添加一个 !important ，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important
『陆』 css选择器有哪些各种选择器优先级大小顺序
CSS选择器如下：
1.
标签名选择器
div
{
color：Red;}
/即页面中的各个标签名的css样式
2.类选择器
.divClass
{color:Red;}
/即定义的每个标签的class
中的css样式
3.ID选择器
#myDiv
{color:Red;}
/即页面中的标签的id
4.后代选择器（类选择器的后代选择器）
.divClass
span
{
color:Red;}
/即多个选择器以逗号的格式分隔
命名找到准确的标签
5.群组选择器
div,span,img
{color:Red}
/即具有相同样式的标签分组显示
选择器的优先级
1.最高优先级是
(直接在标签中的设置样式，假设级别为1000)
2.次优先级是（ID选择器
,假设级别为100）
#myDiv{color:Red;}
3.其次优先级是（类选择器，假设级别为10）
.divClass{color:Red;}
4.最后优先级是
（标签选择器，假设级别是
1）
div{color:Red;}
5.那么后代选择器的优先级就可以计算了啊
比如
.divClass
span
{
color:Red;}
优先级别就是：10+1=11
『柒』 css选择器层叠、优先级、样式冲突
上面是一个简单的html案例，对于同一个元素应用多个规则时，规则中可能包含冲突的声明，在style样式表中包含了三个规则集，每一个规则给它指定了不同的字体颜色。标题不可能同时拥有三种颜色，所以最终的效果是显示的红色(red)。
浏览器如何知道并解决声明冲突，这其中层叠指的就是这一系列规则。它决定了如何解决冲突，是css语言的基础。层叠会依据三种条件解决冲突。
叠层的规则是按照这种顺序来考虑的，看下图
这些规则让浏览器可以以预测的方式解决css样式规则中的冲突。
你添加到网页里的样式表并不是浏览器唯一使用的样式表，还有其他类型或来源的样式表。你的样式表属于作者样式表，除此之外还有用户代理样式表，即浏览器默认的样式。用户代理样式表优先级低，你的样式会覆盖它们。
用户代理样式表在不同浏览器上稍有差异，但是大体上是在做相同的事情：为标题 <h1> 到 <h6> 和段落 <p> 添加上下边距，为列表 <ol>,<ul> 添加左侧内边距，为链接添加颜色，为元素添加各种默认字号。
浏览器应用了用户代理样式表后才会应用你的样式表，即作者样式表，你指定的声明会覆盖用户代理样式表里面的样式，如果在html里链接了多个样式表，那么它们的来源都相同，即属于作者样式表。
用户代理样式表因为设置了用户需要的样式，所以不会做出一些超出预期的事情，当不喜欢默认样式的时候，可以在自己的样式表里面设置别的样式来覆盖用户代理样式即可。
作为一个标准的前端打工仔，必定熟悉覆盖代理样式。这种做法实际上就是利用了层叠的样式来源规则。你写的样式会覆盖用户代理样式，因为来源不同。
样式来源规则有一个例外，标记为重要 !important 的声明。该声明就会被标记为重要的声明。
标记了 !important 的声明会被当做更高优先级的来源，因此总体的优先级按照由高到低排列，如下所示：
如果无法用来源解决冲突声明，浏览器会尝试检查它们的优先级。理解优先级很重要，因为作者样式几乎都是属于优先级的范围，日常工作接触的大部分开发样式是来自于同源，如果不理解优先级，写出来的css样式会被坑的很惨。
浏览器将优先级分为两部分：HTML的行内样式和选择器的样式。
如果HTML的style属性写样式，这个声明只会作用域当前元素。实际上行内元素属于“带作用域”的声明，它会覆盖任何来自样式表或<style>标签的样式。行内样式没有选择器，因为它们直接作用于所在的元素。
上面就是一个行内样式，设置了颜色color为黄色yellow。
如果你希望在样式表中覆盖行内样式的声明，需要在样式表中对应标签下的声明后添加 !importanta ，这样能够将它提升到一个更高优先级来源。但如果行内样式也被标记为 !imortant 那就无法覆盖它了。最好不要在行内使用 !important ，而是只在样式表中使用 !important 。
优先级的第二部分是由选择器优先级决定。比如，有两个类名的选择器比只有一个类名的选择器优先级更高。具体可以看下面的案例。
通过比较选择器类型来决定哪个选择器优先值最高。
上面的样式表中最终显示的color颜色值为红色(red)。
一个常用的表示优先级的方式是用数组形式来标记，通常用都好隔开每个数。比如“1，2，3”表示用1个id、2个类、2个标签组成。优先级最高的id列为第一位，紧接着是类，最后是标签。
我们可以通过下面的表格来查看各种选择器和对应的优先级。
现在，通过比较数值就能快速明确决定哪个优先级更高。所以上面的顺序是"1,0,0">"0,2,0">"0,1,3">"0,0,4"。而优先级低的样式表会被优先级高的样式表给覆盖。
我们日常开发不建议某个元素的样式表写过长的标签名和类名连体。一般只要能够区分优先级即可。
叠层的第三步，也是最后一步，是源码顺序。如果两个声明的来源和优先级相同，其中一个声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明胜出。
在上面方法中，选择器优先级相同，都是(0,1,1)，最终浏览器呈现的颜色color是灰色gray。
『捌』 关于CSS后代选择器 与 优先级的问题
不是优先级的问题
style中div#blue 和div#red 以及限定了style的应用范围
前者只能用在id为blue的div中，后者只能用在id为red的div中
所以会一个显示蓝色，一个显示红色
『玖』 为什么css选择器是对的却找不到元素
1、先确保代码没有错别字；
2、提升这个选择器的优先级，排除掉优先级不够高的可能；
3、这个选择器的书写一定要确保在英文输入状态下，包括空格；
4、检查css中在这个选择器的前面代码有没有输入错误，如：有其他字符在大括号的外面
『拾』 网页开发的时候，怎么合理的选择用选择器
在网页实现中，如何合理的选用“三种基本选择器”呢？
1、在此强烈推荐新手使用“类名选择器”。之所以选择“类名选择器”，主要原因在于：类名选择器可以同时选择多个元素，类似的元素可以使用同一个类名，比ID选择器操作起来更灵活；由于类名选择器必须定义，只有定义类名的标签才能够应用样式，并不会对网页中其他元素造成不必要的影响。
2、标签名选择器，由于其选择范围过广，会导致网页当中所有的同种类型标签都会被选中，此时很容易造成样式影响。不推荐使用。
3、ID选择器，优先级比较高，并且只能够选择一个，适合其使用的“环境”并不多。另外，ID选择器通常是给原生JavaScript预留，一旦看到ID选择器，就能够想“在这里应该是有JS功能存在的”。 不推荐使用。