1、如图所示，我们新建一个记事本，并将记事本的名字改为“网页中的后代选择器和子元素选择器.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2、如图所示，我们在文件图标上鼠标右击，在弹出的下拉列表菜单中，我们依次选择“打开方式（H）”，之后选择“Sublime Text”这个程序。
3、如图所示，我们写一个<!DOCTYPE html>标签用来声明这是一个html5的文档，在写一个,<html>标签用来包含html文档的主主体部分，再写一个<head>标签用来包含html文档的头部部分。
4、如图所示，我们写上<title>标签用来包含网页的标题，再写一个<meta>标签来设置文字的编码方式为UTF-8，以次让浏览器更好的显示我们所编写的网页。
5、如图所示，我们写上html的主体用<body>标签包含，里面在写个<div>标签，里面再写个<p>标签，然后我们在<div>标签里面写个<a>标签，这样div下就有两个子元素了，分别是p元素和a元素。
6、如图所示，我们在那个p元素中写一个span元素，再在其下写一个span元素，这样是为了展示后代元素的展示，之后我们在那个a元素下在写个span元素。
7、如图所示，我们写上<style>标签用来给选中的标签设置样式，并且声明其类型为css类型，并且再写上一个后代选择器，这样的div span是表示选中div下的所有span元素，就是下面所以的是span的后代元素，这就是后代选择器了，其格式为：“标签+空格+要选的标签+大括号”其中大括号中就可以对其设置css样式了。
8、如图所示，我们设置选中元素的文字颜色为蓝色（blue就是中文蓝色的意思）。
9、如图所示，我们用这个div > p > span｛｝这样的就是子元素选择器了，子元素选择器只选择其下元素的子元素，不会往下延伸，就像这个我们要选择其p元素下的span元素，而不想选中p元素下span元素下的span元素，就可以采用这样的方法进行选择了。
10、如图所示，我们鼠标右击在弹出的下拉列表菜单中，我们选择“在浏览器中打开”这一项。
11、如图所示，我们我们看到我们设置的后代选择器可以选择p下所有的span元素，而子元素选择器就只选择p元素下的span子元素，不会再往下延伸了。
12、如图所示，这是本经验教程的源码以供大家参考哈！<!--声明其为一个html5的文档--><!DOCTYPE html><!--用<html>标签包含网页的内容--><html> <!--写入html5文档的<head>标签--> <head> <!--用<title>标签设置html5的标题--> <title>网页中如何使用后代选择器和子元素选择器（7）</title> <!--设置html5的文档的编码格式为utf-8以便使浏览器正确解码网页--> <meta charset="utf-8"> <!--写一个<style>标签用来设置网页的样式，并声明其类型为css--> <style type="text/css"> /*先使用后代选择器，选择div中的所有span元素*/ div span{ /*为span元素设置文字颜色为蓝色*/ color: blue; } /*使用子元素选择器设置特定span的样式*/ div > p > span { /*为span元素设置文字颜色为绿色*/ color: green; } </style> </head> <!--写入html5中的body标签，用来写入html5的主体部分--> <body> <!--写一个div下有一个子元素p元素和a元素--> <div> <!--p元素下有一个子元素span元素--> <p> <!--span元素下有一个span这样的子元素--> <span>我是p元素中的span元素 <!--这是一个span元素了，其下没有元素了--> <span>我是p元素中span元素中的span元素</span> </span> </p> <!--a元素下有一个span的子元素--> <a href="#"> <!--这是一个span元素了，其下没有元素了--> <span>我是个span元素</span> </a> </div> </body></html>
