12

疑似要素を使用できるようにしたいのですが::outside、（今日のテストに基づくと）主要なブラウザーのいずれもそれをサポートしていないようです。

このセレクターを有効にするJSポリフィルの種類はありますか？または、これをシミュレートするための優れた手法はありますか？

4

3 に答える 3

18

正解です。既存のブラウザには、古いCSS3の生成および置換されたコンテンツモジュールの新機能が実装されていないため、提案された疑似要素を試すことはできません。実際、彼らはモジュール自体を書き直すことを計画しているので、現在の作業ドラフトは放棄されたと見なされるべきであり、残念ながら、これらの提案された機能の運命はわかりません。

とにかく、私はこれらの疑似要素に使用できるJSポリフィルも知らないので::outside、CSSでセレクターを作成するのは運が悪いです。

最も近い方法は、コンテナでスタイルを設定する要素の周りに実際の要素をラップすることです...これは、たとえば、jQuery.wrap()または.wrapAll()。

したがって、これを行う代わりに：

p::outside {
    display: block;
    border: 3px solid #00f;
}

あなたはこれをするでしょう：

$('p').wrap('<div class="outside-p" />');

/* 
 * Notice that you can't select only .outside-p that contains p:only-child,
 * so you'll have to come up with esoteric class names.
 */
.outside-p {
    border: 3px solid #00f;
}

jsFiddleプレビュー

ただし、これにはいくつかの注意点があります。

  • これは主にDOMに依存しています。状況によっては、特定の要素を他の要素にラップすることはできません。可能であっても、これらのラッパー要素は、実際の親要素の動作やスタイルにさえ干渉する可能性があります。

    たとえば、次のような場合に子セレクタを使用できなくなります。

    article > p

    jQuery.wrap()これらの要素を意図している場合、それらのラッパー要素はとpの間の親子関係を壊します。articlep

  • 仕様では、や::outsideなどの疑似要素は、それらを生成する要素からスタイルを継承することになっています。JavaScript / jQueryを使用してラッパーを追加する場合、それらのラッパーは、ラップしている要素ではなく、親要素からスタイルを継承します。これは、通常の継承ルールに従って、とにかく子要素として挿入されることを目的としているため、ポリフィルおよびの場合に問題になることはありません。::before::after::before::after

于 2012-05-03T03:55:36.783 に答える
2

私はついにこのスニペットを自分のページに追加しました：

  $('ol > li').each(function(){
        var $this = $(this);
        var $content = $($this.contents());
        $content.wrapAll('<p class="liwrap"/>');
  });

pこれにより、内部が追加され、li子セレクターが壊れたり、クラスに難解な名前が必要になったりする問題が回避されます（親セレクターがないため）。::outsideまた、をで置き換えることができるため、スタイルを継承しないという問題も回避できます::before。

ただし、適切な視覚効果を実現するにpは、生成されたコンテンツのレベルまで内部を上げるために負のマージンが必要です。

于 2012-05-03T10:55:37.493 に答える
2

jQueryを使用しているようです。その場合は、コードに小さな変更を加えることをお勧めします。

$('ol > li').wrapInner("<p class='liwrap' />");

非常に多くの変数や関数呼び出しがなくても、従うのは少しクリーンで簡単です。

編集：畏敬の念が正しく指摘しているように、これはMarcinsソリューションの最適化です...

li内にapを追加します。これにより、子セレクターが破損する問題が回避されます。

于 2012-11-16T16:33:06.527 に答える