css的父选择器

css的父选择器

首先声明一点，目前没有css的父选择器。新出的css3也没有。但是已经有很多人有很多次提案了。
更新20240126，2023年基本上所有浏览器已经支持

1. 反向选择

在2008年Shaun Inman建议这种父选择器。

a < img{
    border: none;
}

这段css的目的是选择img元素的a标签。

2. parent

Remy Sharp建议使用:parent

a img:parent { background: none; }

3. has

MDN上面已经说明了，has已经处于工作草案阶段。现如今没有一个浏览支持。但是感觉功能相当强大。

li:has(> a.active){
    color:red;
}

article:not(:has(a)){
    color:red;
}

通用选择器是效率最低的CSS选择器,如果有一个父选择器，那么很容易成为低效选择器中的新顶级狗。所以束缚这些想法的最大因素是存在巨大的性能问题。

更新 20240126

目前绝大数浏览器已经支持上面说的has方案。简单写个example

// 表示有子元素div2的div1的宽度为1000px
.div1:has(.div2) {
 	width: 1000px;
}

参考

Parent Selectors in CSS

CSS子元素选择父元素