CSS 父级选择器(parent selector)探究

之前有个小伙伴问了一个问题,我觉得挺有意思,也是我之前有几次想到的,后来由于种种方法曲线救国,就这么忽悠过去了。

这次在 Google 又查了一下,依旧没有 parent selector,参考 CSS TRICKS介绍了两种方法:

有人建议这样来选中有 img 的 a 标签:

a < img { border: none; }

也有人建议这么使用:

a img:parent { background: none; }

然而并没有什么卵用,CSS 标准中并没有采纳。

不过在 Stackoverflow 中的答案,在 CSS4 中已经有这样的草案了:

a:has(> img)

然而并不是很靠谱,因为完全没有浏览器对这一草案特性进行了支持,真是个悲伤的故事。

另一方面,鉴于目前并没有 CSS 选择器可用,我们当然可以用 JavaScript 处理 parent 所需要的效果,但是同时,我们更寄希望于 CSS——毕竟,能用 CSS 的真的一点都不喜欢用 JavaScript。

在张鑫旭的博客中给了一种新的思路——使用了兄弟选择器来进行操作。

大致的意思是用一个子元素作为父元素子树中的最后一个元素,其大小和父元素一直,然后就可以处理一些本来希望让父元素表现的效果。不过,这样的效果种类毕竟有限,在例子中是实现了一个父级的 border 高亮,但是如果我要在选中子元素的时候让父元素菊花一紧(缩放大小)呢?似乎就不太可行了。

本文说了半天,其实就是想介绍一下未来和现在可以处理的方法集锦,属于抛砖引玉,希望大家多多海涵。

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, 语法

添加新评论