子代选择器和后代选择器

在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;
        }

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值