CSS 疑似要素

CSS 擬似要素

CSS 擬似要素は、セレクターに特殊効果を追加するために使用されます。

構文

疑似要素の構文:

selector:pseudo-element {property:value;}

CSS クラスでも疑似要素を使用できます:

selector.class:pseudo-element {property :value; ;}

: first-line 擬似要素

「first-line」擬似要素は、テキストの最初の行に特別なスタイルを設定するために使用されます。

次の例では、ブラウザは「first-line」疑似要素のスタイルに従って p 要素のテキストの最初の行を書式設定します:

          <!DOCTYPE html>
<html>
<head>
    <style>
        p:first-line
        {
            color:#ff0000;
            font-variant:small-caps;
        }
    </style>
</head>

<body>
<p>您可以使用:线伪元素添加特殊效果给第一行文本。</p>
</body>
</html>

プログラムを実行して試してください

注:「first-line」疑似要素は、ブロックレベルの要素にのみ使用できます。

注: 次のプロパティを「最初の行」疑似要素に適用できます:

font プロパティ
color プロパティ
background プロパティ
word-spacing
letter-spacing
text -decoration
vertical-align
text-transform
line-height
clear

: 最初の文字の擬似要素

「最初の文字」の擬似要素は、特別なスタイルを設定するために使用されます。テキストの最初の文字:

例

     <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}
</style>
</head>

<body>
<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>

プログラムを実行して試してください

注: "first-letter" 擬似要素はブロックレベルでのみ使用できます要素。

注: 次のプロパティを「最初の文字」擬似要素に適用できます:

フォントプロパティ
カラープロパティ
背景プロパティ
マージンプロパティ
パディングプロパティ
ボーダープロパティ
text-decoration
vertical-align ("float"が"none"の場合のみ)
text-transform
line-height
float
clear

疑似要素とCSSクラス

pseudo-要素は CSS クラスと組み合わせることができます :

p.article:first-letter {color:#ff0000;}

<p class="article">記事内の段落</p>

上記の例では、すべてのクラスが作成されます。記事内の段落の最初の文字が赤になります。

複数の擬似要素

は、複数の擬似要素と組み合わせて使用できます。

以下の例では、段落の最初の文字が赤色で表示され、フォントサイズはxx-largeになります。最初の行の残りのテキストは青色で、小さな大文字で表示されます。

段落内の残りのテキストはデフォルトのフォントサイズと色で表示されます:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter
{
	color:#ff0000;
	font-size:xx-large;
}
p:first-line 
{
	color:#0000ff;
	font-variant:small-caps;
}
</style>
</head>

<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>

プログラムを実行して試してください

CSS - :before 擬似要素

「:before」擬似要素は、要素のコンテンツの前に新しいコンテンツを挿入できます。

次の例では、各 <h1> 要素の前に画像を挿入します。疑似要素は、要素のコンテンツの後に新しいコンテンツを挿入できます。

次の例では、各 <h1> 要素の後に画像を挿入します。

説明例

:link

a:link

未訪問のリンクをすべて選択

:visited

a:visited

訪問済みのリンクをすべて選択

:active

a:アクティブ

アクティブなリンクを選択します:hovera:hoverリンク上にマウスを置きます:focusinput:focusinput後にフォーカスする要素を選択します: first-letterp:first-letter各要素の最初の文字を選択:first-linep:first-line各:first-childp:first-childセレクターは、任意の要素の最初の子である <]p> 要素と一致します :before要素の前のコンテンツ:after要素の後にコンテンツを挿入:lang(言語

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <style> p:first-line { color:#ff0000; font-variant:small-caps; } </style> </head> <body> <p>您可以使用:线伪元素添加特殊效果的第一行文本。</p> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear