css不支持子元素继承

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

在css中,我们可以使用inherit来将一个元素的属性值继承给它的子元素。但是,需要注意的是,在css中并不支持子元素继承的属性是有的。/*以下属性不支持子元素继承*/ background-ima

在css中,我们可以使用inherit来将一个元素的属性值继承给它的子元素。但是,需要注意的是,在css中并不支持子元素继承的属性是有的。

/*以下属性不支持子元素继承*/
background-image
border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
outline-color
outline-style
outline-width
outline
quotes
text-align
text-decoration
text-indent
text-transform
visibility
widows
word-spacing
*/ 

所以,如果想要让某个元素的子元素继承某个属性,我们需要在子元素的选择器中重新设置该属性,而不是使用inherit。例如:

.parent {
   color: red;
}

.child {
   color: inherit; /*将子元素继承父元素的颜色,但实际会失效*/
   color: red; /*正确的写法*/
} 

另外,还需要注意的是,某些属性虽然子元素可以继承,但是对于不同的元素,它们的继承方式也不一样。例如,line-height对于行内元素来说是可以继承的,但是对于块级元素来说则是需要重新设置的。

因此,在书写css样式的时候,我们需要根据不同的元素和属性来决定需要何种方式来继承。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css不支持子元素继承

粉丝

0

关注

0

收藏

0

已有0次打赏