Css :before和:after伪元素能否从父元素继承高度?
我想知道Css :before和:after伪元素能否从父元素继承高度?,css,css-selectors,pseudo-element,inheritance,Css,Css Selectors,Pseudo Element,Inheritance,我想知道:before和:after伪元素是否可以使用inherit值从父元素继承高度,没有实际元素这样做?否。伪元素可以从其生成元素的父元素继承值的唯一方式是生成元素本身也从其父元素继承 这是因为继承是从父级到子级的,一次一级。要使继承跨多个级别的子代工作,每个子代都必须继承 作为一个例子,考虑下面的HTML: <div class="parent"> <div class="child"> </div> </div> 这将不起
:before
和:after
伪元素是否可以使用inherit
值从父元素继承高度,没有实际元素这样做?否。伪元素可以从其生成元素的父元素继承值的唯一方式是生成元素本身也从其父元素继承
这是因为继承是从父级到子级的,一次一级。要使继承跨多个级别的子代工作,每个子代都必须继承
作为一个例子,考虑下面的HTML:
<div class="parent">
<div class="child">
</div>
</div>
这将不起作用,因为即使伪元素的值为inherit
,生成它们的元素,即.parent>.child
,也不会从.parent
继承。相反,它们继承这两个属性的默认值auto
要使其正常工作,您还需要继承.parent>.child
:
.parent{
宽度:100px;
高度:100px;
}
.parent>.child{
宽度:继承;
身高:继承;
}
.parent>.child:before、.parent>.child:after{
内容:'';
位置:绝对位置;
宽度:继承;
身高:继承;
}
我知道这个问题已经很老了,但我今天偶然发现了。根据调查,公认的答案并不准确:
:before
和:after伪元素从它们所附加到的文档树中的元素继承任何可继承的属性
我只是试着继承宽度,结果成功了。关于这些答案,我只是偶然遇到了转换方面。它可能在遗传上相似;我希望它能帮助别人 具有以下特征:
<div class="box">
<div class="frame"></div>
</div>
然后,还将变换帧:before
和帧:after
。然而,它们不具有frame
的属性,例如width
和height
,如上文所述。完整示例请参见此处:
在这把小提琴上,有三个嵌套的正方形,每个正方形旋转10度,但变换定义仅为帧设置,而不是为帧:在之后和帧:之前设置
认为转换也不是“继承的”,这是一个陷阱,因为其他一切都不是。转换在另一个上下文中有影响。我将编辑我的答案以澄清。当我提出这个问题时,我不明白::before
和::after
伪元素是如何工作的。以这种情况为例:divA>divB::after
——我的问题的目的是想知道divB:after是否可以继承divA的属性。在我对这个问题的表述中:_parentelement_指的是
divA`而实际元素指的是
divB
。我希望我的问题是这样理解的。谢谢@BoltClock,现在清楚多了。AKG,我认为你的问题最初理解正确,但现在一切都更清楚了:)
transform: rotate(10deg);