子代选择器和后代选择器

在CSS3中,我们会遇到这个一个问题,当层级过多的时候,我们想对其中的某些标签进行操作,有时候我们又想只对某一层级的标签进行操作,这个时候就涉及到字标签和后代标签的问题


子标签:必须是当前的标签的下一级 必须事儿子。

<ul>
    <li>
        <a href="#">一级菜单</a>
        <div>
            <a href="#">二级菜单</a>
            <a href="#">二级菜单</a>
            <a href="#">二级菜单</a>
        </div>
    </li>

</ul>

例如上面的 li这个标签的字标签就是 a标签和div标签,那有人就有疑问了,那 li的字标签 div设置样式的时候里面的a标签会不会变化呢,答案是 a 标签是不会变化的。
在样式里面可以这样写

        ul li > a {  /*子代选择器 子 指的是 亲儿子  大于号分割   此时的a 一定是 li 的亲 儿子  */
            color: red;
        }

后代标签

        ul a  {   /*后代选择器 所有的后代的意思 最多*/
            color: red;
        }

后代标签只要是当前标签里面的任意一个标签都行不一定非要亲儿子

posted @   飞航之梦  阅读(48)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示