选择器

css有三大特性：继承，优先级，层叠
继承：即子元素可以继承父元素的样式
优先级：指不同类别样式的权重比较
层叠：指当数量相同时，通过层叠（后者覆盖前者）的样式
首先，我们来看一下css选择器都有哪些：

1.标签选择器（div，p，ul）
2.类选择器（class="logo"）
3.ID选择器（id="btn"）
4.全局选择器（*）
5.组合选择器(如：.div .btn,注意两选择器用空格键分开)
6.后代选择器 (如：#header .nav ul li 从父集到子孙集的选择器)
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8.继承选择器(如：div p,注意两选择器用空格键分开)
9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link（默认）、visited（已访问的）、active（鼠标按下）、hover（鼠标悬停处）。)
10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
11.子选择器 (如：div>p ,带大于号>)
12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

css优先级
当两个规则都作用到了同一个HTML元素上，如果定义的属性有冲突，那么应该用谁的值呢？

不同级别：

1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素内的样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器
7.浏览器自定义或继承
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别

在同一级别中，到底div是应用那条规则呢，我们可以用权值来计算，权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高。

内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了.
css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。

简洁、高效的css

所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。
1.不要再ID选择器前使用标签名
解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。
2.不要在类选择器前使用标签名
解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
3.尽量少使用层级关系；
4.使用类选择器代替层级关系