通俗的理解html子元素与后代元素的区别

首先我们来看一个简单的html代码：

<ul>
  <li>
    <a href=\"http://www.manongjc.com\">码农教程</a>
   </li>
<ul>

我们将从这个html代码中来了解什么子元素，什么是后代元素。

首先来看a元素，a元素是li标签的子元素，是ul标签的后代元素

再来看li元素，li元素是ul的子元素

从上面我们可以这样通俗的来理解子元素和后代元素：

子元素：子元素就是儿子，上面实例中，a元素是li的儿子，所以他是li元素的子元素。

后代元素：后代元素是指孙子、曾孙子、曾曾孙子等等。a元素是ul标签的孙子，所以a元素是ul标签的后代元素。

最后通过HTML来标注一下子元素与后代元素：

<ul>//我是爷爷 哈哈
  <li>//我是爸爸，
    <a href=\"http://www.manongjc.com\">码农教程</a>//我是ul的后代元素,li的子元素
   </li>
<ul>

相信大家应该可以理解。 

知道了子元素与后代元素的区别，相信大家对css中的子元素选择器和后代选择器也一目了然。