父元素、子元素、祖先元素、后代元素、兄弟元素的关系

Justinc.

已于 2024-09-30 21:15:42 修改

阅读量275

点赞数 1

分类专栏： # 概念文章标签：前端 html css

于 2024-09-30 20:59:28 首次发布

本文链接：https://blog.csdn.net/sjc122333/article/details/142663758

版权

概念专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、父元素

直接包裹某个元素的元素，就是该元素的父元素。

<div class="info">
    <div class="hd">
        <a href="https://movie.douban.com/subject/1291546/" class="">
            <span class="title">霸王别姬</span>
            <span class="other">&nbsp;/&nbsp;再见，我的妾 / Farewell My Concubine</span>
        </a>
    </div>
</div>

在上面这段代码中我们可以称a元素为span元素的父元素。

2、子元素

被父元素直接包裹的元素，就是该元素的子元素。

<div class="info">
    <div class="hd">
        <a href="https://movie.douban.com/subject/1291546/" class="">
            <span class="title">霸王别姬</span>
            <span class="other">&nbsp;/&nbsp;再见，我的妾 / Farewell My Concubine</span>
        </a>
    </div>
</div>

在上面这段代码中我们可以称span元素为a元素的子元素。

3、祖先元素

包裹元素的元素，就是被包裹元素的祖先。

<div class="info">
    <div class="hd">
        <a href="https://movie.douban.com/subject/1291546/" class="">
            <span class="title">霸王别姬</span>
            <span class="other">&nbsp;/&nbsp;再见，我的妾 / Farewell My Concubine</span>
        </a>
    </div>
</div>

a元素被两个div元素包裹，那么这两个div元素都是a元素的祖先元素，但是正常情况下我们将class属性值为hd的div元素称为a元素的父元素。

4、后代元素

被元素包裹的元素，就是包裹元素的后代。

<div class="info">
    <div class="hd">
        <a href="https://movie.douban.com/subject/1291546/" class="">
            <span class="title">霸王别姬</span>
            <span class="other">&nbsp;/&nbsp;再见，我的妾 / Farewell My Concubine</span>
        </a>
    </div>
</div>

span元素为两个div元素和a元素的后代元素，但是正常情况下成a元素为span元素的父元素。

5、兄弟元素

具有相同父元素的元素，称为兄弟元素。

<div class="info">
    <div class="hd">
        <a href="https://movie.douban.com/subject/1291546/" class="">
            <span class="title">霸王别姬</span>
            <span class="other">&nbsp;/&nbsp;再见，我的妾 / Farewell My Concubine</span>
        </a>
    </div>
</div>