CSS选择器分类、选择器优先级以及CSS优化原则

1. CSS选择器分类

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

三大基本选择器：

1. 标签名选择器 p{}
2. 类选择器  .className{}
3. ID选择器 #id{}

扩展选择器（基于前三者）

1. 后代选择器 .navs li{}
2. 群组选择器 a,img,span{}

2.优先级

优先级计算公式：

选择器越特殊，其指向的元素也就越精准，也就是它的优先级别越高。之前查阅过相关文档，大致都是规定：标签选择器给定1表示其优先级量，类选择器给定10，ID选择器给定100。

<span style="font-size:14px;"><div class="parent">
	<div class="children">
		<div class="title">
			优先级
		</div>
		<div class="body">

		</div>
	</div>
</div></span>

css样式：

<span style="font-size:14px;">.parent .title {
	color:#CCC;
	font-size:16px;
	font-weight:700;
}
.title {
	color:#333;
}</span>

由上述公式计算优先级：

.parent .title 为：10+10 =20；

.title 为： 10;

查看 开发者工具，可看其计算样式如下图所示：

.title 类所做的修改无效，因为其优先级没前一个高，得到验证。

3.CSS优化原则

1. 避免使用通配规则      如    *{} ,页面复杂的话，计算次数会很多，只对需要用到的元素进行选择
2. 尽量少的直接去对标签进行选择，而是用class     如：#navs li{}, 更优的方式是给li加上nav_item的类名，及.nav_item{}
3. 不要去用标签限定ID或者类选择符   如：div#main-container,应该简化为#main-container
4. 尽量少的去使用后代选择器，降低选择器的权重值  后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素
5. 要知道继承这个东西， 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复编写规则