<head>
<title>...</title>
</head>
<body>
<ul>
<li>332</li>
<li>233234</li>
</ul>
<p>...</p>
</body>
</html>
例如上面的html结构:
<html>元素就是<body>和<head>的父元素(上下级,包含关系)
而<body>又是<ul>和<p>的父元素
<ul>又是两个<li>的父元素。
两个<li>就是兄弟元素(平级)
<body>和<head>也是兄弟元素,依此类推。
相应的, ul 和p是body的子元素, 而 li 呢, 是body的后代元素(后代选择符)。
你在dreamweaver里,套用源格式后,代码自动缩进,你很容易就能看出来的。
因为子元素在父元素的容器内。给父层元素绑定事件,实际上已经包括了父层元素内的所有区域,所以也包括子元素,所以点击子元素会触发父元素的点击事件。
对于事件而言,这是一种事件传递。如果不希望事件传递下去,可以在子元素上使用js的阻止事件传递方法stopPropagation,就不会将事件传递到父层元素。