最近在用 markdown 写文章的时候遇到一个问题，就是我想让插入的图片在网页上显示的时候左右居中。这样一个小小的需求，却让我花了不少心思，总结一下想到或者找到的方法：

1. 使用 center + img 标签，但是 center 标签已经被废弃了，所以这不是长久之计，而且写起来也麻烦。

2. 使用 div + img 标签，设置 div 的 align 属性为 center，这种方法写起来还是麻烦。

3. 使用 div + img 标签，设置 div 的 CSS 样式，这个和第二种方法没有本质区别。

4. 自定义 markdown 解析器，增加图片处理，我只是想处理一下图片，这种方法有点杀鸡用牛刀了。

5. 在页面的容器元素中设置其下的图片全部按 100% 宽度显示，这种方法简单粗暴，但是如果图片本身比较小，拉伸之后一是会模糊，二是会很丑。

6. 先设置所有 img 的 display 为 none，在页面加载后，通过 JavaScript 选中 img 的父元素，对其设置样式，并修改 img 的 display，这种方法似乎是目前最好的。

于是我在想，在 CSS 中有没有方法能够选中某个内部包含有特定类型元素的元素，从而对其设置样式，这样就能完美解决所有麻烦了。

:has()

经过一番搜索，还真找到了一个伪类：has，用这个伪类来实现上面的需求的代码如下：

p:has(img){
    text-align: center;
}

这个伪类早在 2010 年就已经提出来了，但一直处于试验阶段，目前没有任何浏览器实现了这个功能 😂。

而没有实现这个功能的原因是性能问题，不过我倒是非常希望能够实现这个功能。

:focus-within

与此同时，我也找到了另一个可以对祖先元素进行操作的选择器 :focus-within，此选择器可用于选择自身或其后代元素获得焦点时的元素。

从名字就可以看出，这个伪类有局限性，那就是要求元素自身或其后代元素能够响应焦点事件，所以此伪类也无法实现上述需求。

结语

综上，目前 CSS 中还没有可以选择父元素的方法，不过，开发者们对这个功能的需求还是很强烈的。