p{color:red;}/*显示为红色权值为0.1对胆小如鼠，                   0.1对公开课*/

.first{color:green;}/*显示为绿色权值为0.1对胆小如鼠                         */

span{color:pink;}/*设置为粉色权值为1对胆小如鼠，                   1对公开课*/

p span{color:black;}/*设置为黑色权值为0.1+1对胆小如鼠,         0.1+1对公开课*/

p.first{color:blue;}/*设置为蓝色权值为0.1+0.1对胆小如鼠,                    */

p.first span{color:purple;}/*设置为紫色权值为0.1+0.1+1对胆小如鼠            */

.first span{color:yellow;}/*设置为黄色权值为0.1+1对胆小如鼠                 */

#second{color:green;}/*设置为绿色权值为                           100对公开课*/

#second span{color:yellow;}/*设置为黄色权值                   为100+1对公开课*/

p#second{color:blue;}/*设置为蓝色权值                          为0.1+100+1*/

p#second span{color:purple;}/*设置为紫色权值                     为0.1+100+1*/

都是层级选择器，后面元素是前面元素的后代。

p .first span{color:blue;} 表示的就是p标签所有后代中 带有first类的标签  的所有后代中的span标签

不能随便调换,顺序是按照祖先先后顺序的,打乱以后就找不到对应父级子级关系了.

#footer .note p{color:yellow;} 意思是先找到id为footer的元素,再找到其后代中所有class带有note的元素,最后找到其后代的所有p标签.

note和p中间有空格,表示祖先与子孙级别,就是说p标签必须要是.note的子孙级才行
<div id="footer">
<div class="note">
<p>这样就正确了</p>
</div>
</div>

测试一次

后面的都是前面的子元素，这个设置的是父元素下子元素的效果，这个只能用三级和二级元素来区分了