由于我们有时需要选择一个标签里面的多相同标签内里的内容，而一个一个选择那就显得有些麻烦了，而且造成许多要写许多代码，而后代选择器就可以帮助我们很好的解决这个问题，当然我子元素们只需要一个标签下的子元素被选中而非这个子元素的子元素，那么子元，素选择器就可以很好的解决这个问题（标签就是元素，元素就是标签哦！），下面我们就来仔细介绍下后台选择器和子元素选择器具体的使用方法哦！
工具/原料
1
windows记事本（任意一个版本即可）
2
Sublime(也是一种记事本)
3
任意一个浏览器即可（这里使用Google Chrome浏览器）
方法/步骤
1
1.如图所示，我们新建一个记事本，并将记事本的名字改为“网页中的后代选择器和子元素选择器.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2
2.如图所示，我们在文件图标上鼠标右击，在弹出的下拉列表菜单中，我们依次选择“打开方式（H）”，之后选择“Sublime Text”这个程序。
3
3.如图所示，我们写一个标签用来声明这是一个html5的文档，在写一个,标签用来包含html文档的主主体部分，再写一个
标签用来包含html文档的头部部分。4标签用来包含网页的标题，再写一个<meta>标签来设置文字的编码方式为UTF-8，以次让浏览器更好的显示我们所编写的网页。</p></div><div class="listcon"><span>5</span><p>5.如图所示，我们写上html的主体用<body>标签包含，里面在写个<div>标签，里面再写个<p>标签，然后我们在<div>标签里面写个<a>标签，这样div下就有两个子元素了，分别是p元素和a元素。</p></div><div class="listcon"><span>6</span><p>6.如图所示，我们在那个p元素中写一个span元素，再在其下写一个span元素，这样是为了展示后代元素的展示，之后我们在那个a元素下在写个span元素。</p></div><div class="listcon"><span>7</span><p>7.如图所示，我们写上<style>标签用来给选中的标签设置样式，并且声明其类型为css类型，并且再写上一个后代选择器，这样的div span是表示选中div下的所有span元素，就是下面所以的是span的后代元素，这就是后代选择器了，其格式为：“标签+空格+要选的标签+大括号”其中大括号中就可以对其设置css样式了。</p></div><div class="listcon"><span>8</span><p>8.如图所示，我们设置选中元素的文字颜色为蓝色（blue就是中文蓝色的意思）。</p></div><div class="listcon"><span>9</span><p>9.如图所示，我们用这个div > p > span｛｝这样的就是子元素选择器了，子元素选择器只选择其下元素的子元素，不会往下延伸，就像这个我们要选择其p元素下的span元素，而不想选中p元素下span元素下的span元素，就可以采用这样的方法进行选择了。</p></div><div class="listcon"><span>10</span><p>10.如图所示，我们鼠标右击在弹出的下拉列表菜单中，我们选择“在浏览器中打开”这一项。</p></div><div class="listcon"><span>11</span><p>11.如图所示，我们我们看到我们设置的后代选择器可以选择p下所有的span元素，而子元素选择器就只选择p元素下的span子元素，不会再往下延伸了。</p></div><div class="listcon"><span>12</span><p>12.如图所示，这是本经验教程的源码以供大家参考哈！<!--声明其为一个html5的文档--><!DOCTYPE html><!--用<html>标签包含网页的内容--><html> <!--写入html5文档的<head>标签--> <head> <!--用<title>标签设置html5的标题--> <title>网页中如何使用后代选择器和子元素选择器（7）
4.如图所示，我们写上
我是p元素中的span元素 我是p元素中span元素中的span元素
我是个span元素注意事项
1
1.欢迎大家有问题时，向本大神进行提问哦！ 。
2
2.没有软件的也可以找本大神。
3
3.教程不只是本篇，而是前端从入门到精通一个系列，欢迎浏览其他教程经验， 祝您早日成为前端大神。
上一篇：Multisim创建子电路图