在日常开发中,我们知道子元素样式名,但是想修改父元素的样式,怎么办呢?其实css已经提供了这个方法
:has
官方描述:表示一个元素,如果作为参数传递的任何相对选择器在锚定到该元素时,至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数,提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。
我的理解:其实简单点,就好比下面这个例子,父元素类型是div,然后它的直接子节点是 child,那么就修改它的样式为display: block;
div:has(> .child) {
display: block;
}
其实has内部可以根据你自己的需求来定义,它本身是伪类,当然可以和 :is, :not其他伪类一起搭配使用
当然有些童鞋好奇,sass中的@at-root 能否修改父元素样式?
答案是不能,因为@at-root是将一个或多个样式规则生成在样式文件根层级上,而不是嵌套在其父选择器中,意思是 在sass/scss文件中,还是以前嵌套写法,但最后生成css样式文件时,会将@at-root 后面的样式 提到最高层级去