CSS:CSS选择器及优先级问题

CSS三大特性—— 继承、 优先级和层叠。

继承：即子类元素继承父类的样式;

优先级：是指不同类别样式的权重比较;

层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

1.CSS选择器分类

• 全局选择器（通配符*）
• 标签选择器（body，div，p，ul，li）
• 类选择器（.）
• ID选择器（#）
• 组合选择器（.head .head_loge，两选择器之间用空格隔开）
• 后代选择器（#head .nav li ul，从父级到子孙集的选择器）
• 子选择器（div>p）
• 群组选择器（div，span，img{color：red；}，即将具有相同样式的标签分组显示）
• 继承选择器（div p，两选择器用空格键分开）
• 伪类选择器（链接样式a元素的伪类：:link(未被访问)，:visited(已访问)，:active(被选择)，:hover(当鼠标悬停在链接上)）
• 字符串匹配的属性选择符（^(开始)，$(中间)，*(结尾)）
• css相邻兄弟选择器（如h1+p）

2.CSS选择器优先级

不同级别：！important（在样式属性后不加“;”，在!important后加分号）>行内样式>ID选择器>Class选择器>标签>通配符

相同级别：

（1）同一级别中后写的会覆盖先写的样式
（2）选择器约分

**CSS优先级：是由四个级别和各级别出现次数决定的
四个级别：行内样式，ID选择器，Class选择器，标签
每个规则对应一个初始值0,0,0,0
若是 行内选择符，则加1、0、0、0

若是 ID选择符，则加0、1、0、0

若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0

若是 元素选择符/伪元素选择符，则分别加0、0、0、1

算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。**

注意：
①、!important的优先级是最高的，但出现冲突时则需比较”四位数“;

②、优先级相同时，则采用就近原则，选择最后出现的样式;

③、继承得来的属性，其优先级最低;

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。

3.CSS 选择器解析原则

从右向左进行解析，切记！！！能够减少节点的便利。

浏览器从右向左解析CSS选择器

style样式

如果从左到右一层一层的筛选：首先会看到很多div被筛选出来，接下来筛选每一个div，首先在#div2中看到了class=p1的p，此时我们很是高兴，感觉胜利就在前方了，再看class=p1的p标签的子元素，看到第一个很是失望，不符合span.red，不要急，再看下一个又不符合规则，小小的安慰自己一下，最后一个含有class，说不定就是了，结果，结果居然class=green，此时火冒三丈，就差最后一层，怎奈居然出现这种事，无奈之下只能在返回#div2继续匹配它的子元素....

但如果我们换一个思路，首先匹配class=red 的 span，我们找到2个符合条件的的span然后在和上一次比对，我们需要的是span.red 是 p.p1的下属元素，此时就发现刚才筛选出来的第二个 span 元素不符合要求，再来匹配第一个，层层向上匹配，最终匹配成功。

4.简洁，高效的CSS

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