27

:beforeと:after疑似要素がinherit、実際の要素がそうしなくても、値を使用して親から高さを継承できるかどうか疑問に思っていますか？

4

4 に答える 4

29

いいえ。疑似要素が生成要素の親から値を継承できる唯一の方法は、生成要素自体もその親から継承している場合です。

これは、継承が親から子に、一度に1レベルずつ発生するためです。継承が子孫のいくつかのレベルで機能するには、すべての子孫がを継承する必要があります。

例として、次のHTMLについて考えてみます。

<div class="parent">
    <div class="child">
    </div>
</div>

次のCSSを使用します。

.parent {
    width: 100px;
    height: 100px;
}

.parent > .child:before, .parent > .child:after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
}

疑似要素の値がinherit。であっても、それらを生成する要素、つまり、は.parent > .childから継承しないため、これは機能しません.parent。代わりに、auto両方のプロパティのデフォルト値を継承します。

これが機能するためには、.parent > .child継承も必要です。

.parent {
    width: 100px;
    height: 100px;
}

.parent > .child {
    width: inherit;
    height: inherit;
}

.parent > .child:before, .parent > .child:after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
}
于 2012-08-25T19:27:08.327 に答える
16

この質問はかなり古いことは知っていますが、今日私はそれに遭遇しました。http://www.w3.org/TR/CSS21/generate.htmlによると、受け入れられた答えは正確ではありません。

:beforeand：after疑似要素は、それらがアタッチされているドキュメントツリーの要素から継承可能なプロパティを継承します。

幅を継承してみたところ、うまくいきました。

于 2014-08-22T11:13:56.273 に答える
2

これらの答えに関して、私はただ変革の側面にぶつかっていました。継承に似ているかもしれません。それが誰かに役立つことを願っています。

これを持っている：

<div class="box">    
  <div class="frame"></div>
</div>

そしてこの変換frame：

transform: rotate(10deg);

次に、frame:beforeともframe:after変換されます。ただし、上記で説明したような、、などframeのプロパティはありません。完全な例はここを参照してください：widthheight

http://jsfiddle.net/chafpgwt/1/

このフィドルには、それぞれ10度回転した3つのネストされた正方形がありますが、変換定義は、に対してのみ設定され、どちらframeに対しても設定されていません。frame:afterframe:before

他のすべてが継承されていないため、変換も「継承」されていないと考えるのは落とし穴です。変換は別のコンテキストで影響を及ぼします。

于 2015-04-05T07:27:46.363 に答える
0

疑似要素を使用し::beforeて背景を実装する場合 の秘訣は、要素absoluteとその親を配置したことを確認することですrelative。親の幅も必ず設定してください。

例

&__item {

    position: relative;
    width: 100%;
    height: 100%;
      
        &::before {
            content: "";
            background-color: red;
            background-size: 100%;
            
            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;
            
        }
}
于 2021-08-24T16:27:54.413 に答える