CSS选择器优先级总结
CSS三⼤特性—— 继承、优先级和层叠。
继承：即⼦类元素继承⽗类的样式;
优先级：是指不同类别样式的权重⽐较;
层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。
css选择符分类 
⾸先来看⼀下css选择符(css选择器)有哪些?
  1.标签选择器(如：body,div,p,ul,li)
  2.类选择器(如：class="head",class="head_logo")
  3.ID选择器(如：id="name",id="name_txt")
  4.全局选择器(如：*号)
  5.组合选择器(如：.head .head_logo，注意两选择器⽤空格键分开)
  6.后代选择器 (如：#head .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元素上时，如果定义的属性有冲突，那么应该⽤谁的值的，CSS有⼀套优先级的定义。不同级别
1. 在属性后⾯使⽤ !important 会覆盖页⾯内任何位置定义的元素样式。
2. 作为style属性写在元素内的样式
3. id选择器
4. 类选择器
5. 标签选择器
6. 通配符选择器
7. 浏览器⾃定义或继承
总结排序：!important > ⾏内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同⼀级别
同⼀级别中后写的会覆盖先写的样式
上⾯的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合，像这样
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
background-COLOR:#a00;
width:100px;
height: 100px;
}
.st2{
background-COLOR:#0e0;
width:100px;
height: 100px;
}
</style>
</head>
<body>
<div class="test test2"></div>
</body>
</html>
到底div是应⽤那条规则呢，有个简单的计算⽅法（经园友提⽰，权值实际并不是按⼗进制，⽤数字表⽰只是说明思想，⼀万个class也不如⼀个id权值⾼）
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
我们可以把选择器中规则对应做加法，⽐较权值，如果权值相同那就后⾯的覆盖前⾯的了，div.class的权值是1+10=11，⽽.test1 .test2的权值是10+10=20，所以div会应⽤.test1 .test2变成绿⾊
另外⼀种理解⽅式：
  CSS优先级：是由四个级别和各级别的出现次数决定的。
  四个级别分别为：⾏内选择符、ID选择符、类别选择符、元素选择符。
  优先级的算法：
  每个规则对应⼀个初始"四位数"：0、0、0、0
cssclass属性  若是⾏内选择符，则加1、0、0、0
  若是 ID选择符，则加0、1、0、0
  若是类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
  若是元素选择符/伪元素选择符，则分别加0、0、0、1
  算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进⾏⽐较，⼤的优先级越⾼。 
需注意的：
  ①、!important的优先级是最⾼的，但出现冲突时则需⽐较”四位数“;
  ②、优先级相同时，则采⽤就近原则，选择最后出现的样式;
  ③、继承得来的属性，其优先级最低;
  !important > ⾏内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
  *css选择器使⽤强烈建议采⽤低权重原则，利于充分发挥css的继承性，复⽤性，模块化、组件化。
CSS选择器的解析原则
以前⼀直认为选择器的定位DOM元素是从左向右的⽅向，查看了⽹上的相关资料之后才发现原来⾃⼰⼀直都是错的。郑重的声明选择
器定位DOM元素是从右往左的⽅向，这样的好处是尽早的过滤掉⼀些⽆关的样式规则和元素。
简洁、⾼效的css
所谓⾼效就是让浏览器查更少的元素标签来确定匹配的style元素。
1.不要再ID选择器前使⽤标签名
解释：ID选择是唯⼀的，加上标签名相当于画蛇添⾜了，没必要。
2.不要在类选择器前使⽤标签名
解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防⽌混淆如（p.colclass{color：red;} 和 lclass{color:red;}
3.尽量少使⽤层级关系；
#lclass{color:red;}改为  .colclass{color:red;}
4.使⽤类选择器代替层级关系（如上）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。