:has()
:has() 伪类是一个关系伪类,它接受一个选择器列表作为参数,当元素包含与选择器匹配的后代元素时匹配。
语法
css
selector:has(selector-list) {
property: value;
}示例
css
/* 匹配包含 .highlight 类的段落 */
p:has(.highlight) {
border: 1px solid #ccc;
}
/* 匹配包含子元素的列表项 */
li:has(*) {
padding: 5px;
}
/* 匹配包含至少一个链接的导航 */
nav:has(a) {
background-color: #f5f5f5;
}
/* 匹配包含输入字段的表单 */
form:has(input) {
padding: 20px;
}
/* 匹配包含图片的 div */
div:has(img) {
display: flex;
}