有趣且重要的css知识合集（8）知道子元素，如何修改父元素样式？

在日常开发中，我们知道子元素样式名，但是想修改父元素的样式，怎么办呢？其实css已经提供了这个方法

:has

官方描述：表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

我的理解：其实简单点，就好比下面这个例子，父元素类型是div，然后它的直接子节点是 child，那么就修改它的样式为display: block;

div:has(> .child) {
    display: block;
}

其实has内部可以根据你自己的需求来定义，它本身是伪类，当然可以和 :is, :not其他伪类一起搭配使用 

当然有些童鞋好奇，sass中的@at-root 能否修改父元素样式？

 答案是不能，因为@at-root是将一个或多个样式规则生成在样式文件根层级上，而不是嵌套在其父选择器中，意思是 在sass/scss文件中，还是以前嵌套写法，但最后生成css样式文件时，会将@at-root 后面的样式 提到最高层级去