7

私は CSS 疑似要素セレクターを他の多くのセレクターと同様に使用してきました。

しかし、私は頭を悩ませ、マークアップと並んで位置する理由を考え出すのに苦労しています.

次の例を見てください。

    <p>Hello</p>

    p:after {
       content: "*";
    }

<span>では、タグを使用するよりもこれを使用する利点は何ですか?

と のポイントが:beforeあり:afterませんか? 既存のセマンティック マークアップよりもそれらを使用する確固たる理由はありますか?

4

5 に答える 5

9

CSS2.1 仕様では、生成されたコンテンツについて次のように述べています。

場合によっては、作成者はユーザー エージェントに、ドキュメント ツリーから取得されていないコンテンツを表示させたい場合があります。このよく知られた例の 1 つは、番号付きリストです。作成者は番号を明示的にリストすることを望まず、ユーザー エージェントに番号を自動的に生成させたいと考えています。同様に、作成者は、図のキャプションの前に「図」という単語を挿入したり、第 7 章のタイトルの前に「第 7 章」という単語を挿入したりすることをユーザー エージェントに求める場合があります。特に音声や点字の場合、ユーザー エージェントはこれらの文字列を挿入できる必要があります。

基本的に、目的は「コンテンツ」によるコンテンツ構造の汚染を最小限に抑えることです。「コンテンツ」は、プレゼンテーション要素としてより適しているか、自動化するのに適しています。

于 2011-07-18T22:17:28.220 に答える
2

:beforeandについて話している場合:after: これらは、実際のドキュメントに要素を追加すると構造と外観が混在する場合のプレゼンテーション要素として使用されます。私が見たいくつかのケース：

  • 箇条書きの箇条書き
  • q要素の引用
  • スタイリッシュな影
  • 装飾とテキストの開始または終了
于 2011-07-18T22:21:38.010 に答える
2

私はCSS2にいたと思います:beforeが:after、衒学はさておき、これらの特定の疑似要素は、実際には単なる視覚補助である「コンテンツ」を追加するように設計されています.

代表的な例は、要素の周りに引用符を追加すること<q>です。これは、Firefox がデフォルトのスタイルシートでこれらのセレクターを使用して行います。フロートをクリアするために使用する人もいます。

CSScontentプロパティの名前に関係なく、実際のコンテンツには使用しないでください。非視覚的なユーザー エージェント (つまり、スクリーン リーダー) はそれらを無視する必要があります。

個人サイトのホバー リンクに小さな Unicode アイコンを追加するために使用したことはありますが、あなたのように、使用したと言うだけです。

于 2011-07-18T22:16:33.133 に答える
1

正直なところ、唯一価値のある使用法は、DOM 内で要素を強制的に正しいサイズにすることです。たとえば、次のコードを使用します。

<div class="container">
    <div>this div is floated left</div>
    <div>this div is floated left</div>
</div>

通常、.container div の正確な高さまたは最小の高さを指定する必要があります。非常に単純な css で ":after" を適用した場合、.container に適用した背景は実際には (ほぼすべてのブラウザーで) シムがほとんどまたはまったくなく、適切に表示されます。

.container:after{
    content:'.';
    height:0;
    line-height:0;
    display:block;
    float:left;
    visibility:hidden;
}

次に、その例を試して、背景色または画像を適用すると、.container div が常に適切な高さ (内部コンテンツの合計高さ) を持っていることがわかります。ほとんどの ul/li css ボタンに当てはまります)。

また、html ページごとにすべてのコンテンツをラップするすべての div で after を使用します。これは、特定のページのすべてのコンテンツがフローティングされる可能性があるためです。コンテンツ div が常に正しいサイズ/パディングで適切な背景を持つようにしたいと考えています。

于 2012-01-07T08:55:43.147 に答える
1

CSS3 疑似セレクターには、:link、:hover、:active、:focus、:first-child、:nth-child などの必須のセレクターも含まれています。これらのほとんどがなければ、有用なサイトを作成することは不可能です。

:after や :before などのあまり使用されない疑似セレクターについては、コンテンツが動的に生成され、特定の要素またはタグの前に何かを挿入したい場合に役立ちます。

于 2011-07-18T22:16:46.970 に答える