首页 前端知识 有趣且重要的css知识合集(8)知道子元素,如何修改父元素样式?

有趣且重要的css知识合集(8)知道子元素,如何修改父元素样式?

2024-07-24 23:07:31 前端知识 前端哥 673 643 我要收藏

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

:has

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

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

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

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

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14246.html
标签
评论
发布的文章

JSON File 格式详解

2024-08-08 23:08:37

nvm安装node一直没有npm

2024-08-08 23:08:25

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!