子代选择器和后代选择器
在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;
}
后代标签只要是当前标签里面的任意一个标签都行不一定非要亲儿子
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)