1.第一从符号上来区分后代选择器：是用空格来分隔开来 例如<h1>一个<span>人</span>的战争</h1> 就是h1 span{}子代选择器：用特殊符号> 例如 h1>span{}

2.第二从用法上区分后代选择器html部分：<ul class="study"> <li>物理 <ul> <li>力学</li> <li>声学</li> <li>电磁学</li> </ul> </li> <li>数学 <ul> <li>微积分</li> <li>概率论</li> <li>博弈论</li> </ul> </li> </ul> css部分//使用子代选择器的效果.study >li{ border:1px solid red;/*只给物理和数学加一个红色方框*/}//使用后代选择器的效果.study li{ border:1px solid red;/*给物理 力学 声学 电磁学 和数学 微积分 概率论博弈论都加一个红色方框*/}这说明子代是他是单传只给物理和数学就断子绝孙，后代是一代传一代。

子代选择器时效果图：

后代选择器时效果图：

1.类选择器（class选择器）

基本使用：

.类选择器{

属性名: 属性值;

...}

2.id选择器

基本使用：

#id选择器{

属性名: 属性值;

...

}

3. html元素选择器

某个html元素{

属性名: 属性值;

...

}

4.通配符选择器

该选择器可以用到所有的html元素，但是其优先权最低

*{

属性名: 属性值;

...

}

很古老的话题了

id=100

class=10

tag（标签）=1

按照这个规律去计算，比如

#qietu div{}

100+1 = 101

.qietu .box{}

10+10=20

可以得出第一个的权重要比第二个要高。另外关于权重的扩展知识面，我推荐了解下BEM命名规则，这个观念很好，可以从侧面杜绝权重问题的产生，还有一个就是提高权重的方法 !important;

首字母必须是字母或者下划线不能是数字和其他