css中子类不继承父类

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,通常情况下,子元素会继承父元素的属性。但是,在某些情况下,我们可能想让子元素不继承父元素的属性。这时,我们可以使用子类不继承父类的技巧。.parent{ font-size: 16px;

在CSS中,通常情况下,子元素会继承父元素的属性。但是,在某些情况下,我们可能想让子元素不继承父元素的属性。这时,我们可以使用子类不继承父类的技巧。

.parent{
    font-size: 16px;
}
.parent .child{
    font-size: inherit; /*继承属性*/
}
.parent .uninherit{
    font-size: 14px !important; /*不继承属性*/
} 

如上所示,我们先设置父元素的字体大小为16像素,然后给子元素设置一个继承字体大小的属性。这时,子元素的字体大小会和父元素一致,即为16像素。

但是,如果我们想让某些子元素不继承父元素的字体大小属性,比如一个类名为“uninherit”的元素,我们可以在其属性值后添加“!important”这个关键字,来强制覆盖父类的属性,让它的字体大小为14像素,而不是继承父元素的16像素。

在实际开发中,我们可以根据需要使用这种技巧,来控制元素的样式。但是,由于“!important”是一个比较强的关键字,会覆盖其他一些样式,所以我们应该谨慎使用。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中子类不继承父类

粉丝

0

关注

0

收藏

0

已有0次打赏