CSS :has 选择器
定义和使用
CSS 的 :has 伪类是一种选择器,它允许你根据其后代元素来选择一个元素。
:has 伪类在 CSS 选择器中非常有用,因为它可以基于更复杂的条件来选择元素。
:has
伪类在 CSS 中是相对较新的功能,可能不被所有浏览器支持。在使用之前,建议检查浏览器的兼容性。:has
伪类不能与*
选择器一起使用,它只能与类型选择器(如div
、span
等)或类选择器一起使用。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器 | |||||
---|---|---|---|---|---|
:invalid | 10.0 | 10.0 | 4.0 | 5.0 | 10.0 |
CSS 语法
parent:has(selector) { /* 样式规则 */ }
parent
:表示父元素的选择器。selector
:表示你希望在父元素中找到的子元素的选择器。
更多实例
选择包含特定类名的元素
选择包含多个特定子元素的元素
以上代码将为同时包含 <li>
和 <div>
子元素的 <ul>
元素添加蓝色虚线边框。
点我分享笔记