css 选择器
css 选择器
(以空格分隔)
<!-- 后代选择器(以空格分隔) 选择div 元素内的所有p 元素 中的 所有span 元素 --> <style> div p span{ color: #ff0000; } </style> <span>dafei01</span> <div> <span>dafei02</span> </div> <div> <p> <span>dafei03 红色 </span> <strong> <span>dafei04 红色</span> </strong> </p> </div> <p> <span>dafei05</span> </p>
<!-- 子元素选择器(以大于号分隔) 选择div 元素内的子代p 元素 中的子代span 元素 [ 必须是div p span 层级模式,中间不能有其他元素 ] --> <style> div > p > span { color: #ff0000; } </style> <span>dafei01</span> <div> <span>dafei02</span> </div> <div> <p> <span>dafei03 红色 </span> <strong> <span>dafei04</span> </strong> <span>dafei06 红色 </span> </p> </div> <p> <span>dafei05</span> </p>
其他不常用的伪元素 ::first-letter 选择指定元素的第一个单词 ::first-line 选择指定元素的第一行 ::selection 选择指定元素中被用户选中的内容 01) -------------------------------------------------------------------------- <style> /* 所有的span标签前面添加foo_ 也可以是图片 content: url('./img.png') */ /*这2种等效,习惯选择第一种,使用2个冒号, 其实就是为了 把伪元素和伪类区分开*/ /* 这里的content 属性不能省略 */ span::before { /* 习惯写2个冒号 */ content: 'foo_'; } /*span:before {*/ /*content: 'foo_';*/ /*}*/ </style> <span>dafei01</span> <div> <span>dafei02 红色</span> </div> <div> <p> <span>dafei03</span> <strong> <span>dafei04</span> </strong> <span>dafei06</span> </p> </div> <p> <span>dafei05</span> </p> 02) ---------------------------------------------------------------------------- <style> /* 为元素可以看做行内元素 */ span::before { content: 'foo_'; background-color: #ff0000; display: inline-block; width: 50px; height: 50px; margin-right: 30px; } </style> <span>dafei01</span> <div> <span>dafei02 红色</span> </div> <p> <span>dafei05</span> </p>
04)
<!-- 交集选择器(标签和class构成) --> <style> /* 标签是div且class为class_foo */ div.class_foo { color: #ff0000; } </style> <span class="class_foo">dafei01</span> <div class="class_foo"> <span>dafei02 红色</span> </div> <div> <p class="class_foo"> <span class="class_foo">dafei03</span> <strong> <span class="class_foo">dafei04</span> </strong> <span>dafei06</span> </p> </div> <p class="class_foo"> <span>dafei05</span> </p>
<!-- 并集选择器(以逗号分隔) --> <style> div, p, span { color: #ff0000; } </style> <span>dafei01 红色</span> <div> <span>dafei02 红色</span> </div> <div> <p> <span>dafei03 红色</span> <strong> <span>dafei04 红色</span> </strong> <span>dafei06 红色</span> </p> </div> <p> <span>dafei05 红色</span> </p> <h5>dafei07</h5>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!