css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器
https://www.cnblogs.com/xuchao-blogs/p/13728798.html
1.兄弟选择器: ~
该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素);
.p ~ li{ color: blue; }
<div> <p class="p">我是p元素</p> <strong>我是strong元素</strong> <li>我是li元素</li> /*li元素被选中*/ </div>
2.相邻兄弟选择器: +
该选择器会选择当前元素相邻的第一个兄弟元素(不管指定不指定相邻兄弟元素的类型,都会选择相邻第一个元素,如果没有匹配到则不给定样式);
.p + li { color: red; }
<p class="p">我是p元素</p> <li>我是紧邻的li元素</li> /*紧邻的li被选中;如果紧邻p元素的的不是li元素,则没有选中任何元素就无法添加指定样式*/ <strong>我是strong元素</strong>
3.子元素选择器: >
该选择器会选择该元素下的指定子元素(只包括子元素,除了子元素以外的后代选择器不被选择);
.p > li { color: green; }
<p class="p"> <strong>我是strong</strong> <li>我是li1</li> /*被选中*/ <li> /*被选中*/
我是li2
<li>我是p元素的孙子元素li</li> /*作为p元素的孙子元素,不被选中*/
</li> <span>我是span</span> </p>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战