ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS 擬似要素は何に使用されますか?

CSS 擬似要素は何に使用されますか?

王林
リリース: 2020-11-12 14:23:03
オリジナル
2704 人が閲覧しました

css 疑似要素は、セレクターの特殊効果を追加するために使用されます。たとえば、[:first-line] 疑似要素は、テキストの最初の行に特別なスタイルを設定するために使用され、[: first-letter] 擬似要素は、テキストの最初の文字に特別なスタイルを設定するために使用されます。

CSS 擬似要素は何に使用されますか?

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

(学習ビデオ共有: css ビデオ チュートリアル)

疑似要素の構文:

selector:pseudo-element {property:value;}
ログイン後にコピー

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

selector.class:pseudo-element {property:value;}
ログイン後にコピー

例:

:first-line 擬似要素

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

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

p:first-line {
    color:#ff0000;    
    font-variant:small-caps;
}
ログイン後にコピー

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

:first-letter 擬似要素

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

p:first-letter {
    color:#ff0000;    
    font-size:xx-large;
}
ログイン後にコピー

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

関連する推奨事項: CSS チュートリアル

以上がCSS 擬似要素は何に使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート