新手怎么解读CSS选择器的关系

发布时间：2023-09-14 14:54:14 所属栏目：语言来源：

导读：在这篇文章中，我们来学习一下“新手怎么理解CSS选择器的关系”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

1、父元

在这篇文章中，我们来学习一下“新手怎么理解CSS选择器的关系”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

1、父元素：直接包含其他元素，这个元素就是包含元素的父元素。

2、祖先元素：包含其他元素，这个元素就是包含元素的祖先元素。

3、子元素：直接被包含的元素。

这个被包含的元素就是包含元素的子元素

4、后代元素：被包含的元素。

这个被包含的元素就是包含元素的后代元素。

实例

1、相邻选择器   选择器1+选择器2{ }<br>

2、后代选择器   选择器1 选择器2{ }<br>

3、子选择器     选择器1>选择器2{ }<br>

<style>

  相邻选择器

    li+li{

        color:springgreen;

    }

  后代选择器

    div span{

        font-size: 40px;

    }

  子选择器

    div>span{

        background-color: yellowgreen;

    }

</style>

    <div>

        <ul>

            <li>列表第一个</li>

            <li id="sec">列表第二个</li>

            <li>列表第三个</li>

            <li>

                <span>div的后代span</span>

            </li>

        </ul>

        <span>div的子代span</span>

    </div>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!