4

::afterおよびなどのCSS2.1疑似セレクターを::before使用すると、ページにテキストコンテンツを追加できます。例えば ​​：

CSS

 p:after { content:' Batman!' }

HTML

<p>Na Na Na Na Na Na</p>

ブラウザで出力

Na Na Na Na Na Na Batman!

同じHTMLソースを使用した私の質問は、なぜこのCSSが必要なのかということです。

 p { content:'My hero is' }
 p:after { content:' Batman!' }

これを出力しません

My hero is Batman!

しかし、代わりにこれを出力しますか？

Na Na Na Na Na Na Batman!

コンテンツプロパティのw3c仕様：http ：//www.w3.org/TR/CSS21/generate.html#propdef-content

回答-私はCSS2.1仕様を見ていました。CSS3仕様は、疑似セレクターがなくても可能であることを示しています::after。::beforeしかし、すべてのブラウザがそれを実装しているわけではありません。

  • Chrome 20.0.1132.57：いいえ
  • Opera 12.00 r1467：はい
  • Safari 5.1.7（7534.57.2）：いいえ
  • IE 8.0.7601：いいえ（CSS2コンテンツプロパティは実装されていません）
4

3 に答える 3

5

仕様で指定されているように、* pseudo-elementsとcontent:一緒にのみ使用可能であり、私が恐れているよりも良い答えはありません。:before:after

12.2'content'プロパティ

このプロパティは、ドキュメント内のコンテンツを生成するために、:beforeおよび:after 疑似要素とともに使用されます。

ただし、質問を「CSSを使用して好きな場所にコンテンツを追加できないのはなぜですか」と解釈する必要がある場合はどうでしょうか。答えは理論的なものですが、単純です。

CSSは、新しいコンテンツを提供する方法ではなく、既存のコンテンツをフォーマットする方法です。

「CSSを使用してコンテンツを変更することは想定されていません。CSSにそれ以上のことはありません。:beforeおよび:after 疑似要素は、フォーマットとコンテンツの間の障壁を打ち破るため、頻繁に議論されてきました。」--refp

:before/は、表示される前には不可能だった方法でデータをフォーマット:afterできるため、優れたリソースです。「フォーマット」という言葉を使用していることに注意してください。これは、データジェネレーターではなく、フォーマッターであるとまだ考えているためです。

フォーマットとコンテンツの間に明確な境界線がある使用可能な代替案を考え出すことは非常に困難でした（そしてイライラしました）ので、これは（少なくとも私によれば）私がそれを生きることができる許容できる中間です。

問題の疑似要素が最初に登場したとき、私はその大ファンではなかったことを認めなければなりません。

于 2012-07-14T09:33:50.037 に答える
5

引用されたCSS2.1仕様は、「疑似要素の前と後に適用されます」と述べています。この制限は、 CSS3の生成および置換されたコンテンツモジュールのドラフトで緩和されました。これは、古く（2003）、古くなっていますが、まだ部分的に実装されています。contentOperaは（画像の挿入に使用される）URL値の使用を除いて、通常の要素をサポートしているようですが、ChromeとSafariはURL値に対してのみ同じことを行います。したがって、コードは実際にはSafariで機能します。

モジュールの仕様作業がある程度進展しない限り、より広範囲にサポートされる可能性はほとんどありません。W3C CSSモジュールのステータスページでは、モジュールは「書き換え」セクションにあり、「非常に古くなっています」という注記があります。

于 2012-07-14T09:55:42.370 に答える
1

実際にはcontent、疑似要素だけではなく、要素に直接プロパティを使用することができます。試す

   p { content:'My hero is' }

Operaで、あなたはあなたが望む結果を見るでしょう。問題は、他のブラウザはまだそれをサポートしていないということです。

生成されたコンテンツに関する他の多くの興味深いことがCSS3の生成および置換されたコンテンツモジュールにありますが、ブラウザーのベンダーがそれを実装するまで少し待つ必要があります。

于 2012-07-14T09:49:43.460 に答える